/**
 * Booknetic for Theme V4 — Design System component primitives.
 *
 * Buttons, inputs, selects, textarea, switch, checkbox, radio, badge,
 * pill, alert, tooltip, dropdown, tabs, accordion, breadcrumbs, table.
 *
 * Every component:
 *   • Has size variants (sm / md / lg) where it makes sense
 *   • Has hover / focus-visible / active / disabled / is-loading states
 *   • Uses --ds-* tokens — no hard-coded colors
 *   • Honors prefers-reduced-motion via shared transitions
 */

/* ============================================================ */
/* BUTTON                                                        */
/* ============================================================ */

.ds-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-space-2);
	height: var(--ds-control-h);
	padding: 0 var(--ds-space-5);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--ds-radius-button);
	color: var(--ds-color-text);
	font-family: inherit;
	font-size: var(--ds-text-sm);
	font-weight: var(--ds-font-semibold);
	letter-spacing: var(--ds-tracking-normal);
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: var(--ds-transition-all);
	white-space: nowrap;
}
.ds-btn:active        { transform: scale(0.97); }
.ds-btn:focus-visible { outline: 0; box-shadow: var(--ds-ring-focus); }
.ds-btn[disabled],
.ds-btn.is-disabled {
	opacity: var(--ds-opacity-disabled);
	cursor: not-allowed;
	pointer-events: none;
}

/* Variants */
.ds-btn--primary {
	background: var(--ds-gradient-cta);
	color: var(--ds-color-primary-contrast);
	box-shadow: var(--ds-shadow-cta);
}
.ds-btn--primary:hover { background: var(--ds-gradient-cta-hover); box-shadow: var(--ds-shadow-cta-h); }

.ds-btn--secondary {
	background: var(--ds-color-surface);
	border-color: var(--ds-color-border);
	color: var(--ds-color-text);
}
.ds-btn--secondary:hover { background: var(--ds-color-surface-hover); border-color: var(--ds-color-border-strong); }

.ds-btn--ghost {
	background: transparent;
	color: var(--ds-color-text-muted);
}
.ds-btn--ghost:hover { background: var(--ds-color-surface); color: var(--ds-color-text); }

.ds-btn--link {
	background: transparent;
	color: var(--ds-color-text-link);
	height: auto;
	padding: 0;
	font-weight: var(--ds-font-medium);
}
.ds-btn--link:hover { color: var(--ds-color-text-link-hover); text-decoration: underline; text-underline-offset: 0.2em; }
.ds-btn--link:active { transform: none; }

.ds-btn--success {
	background: var(--ds-gradient-success);
	color: var(--ds-color-primary-contrast);
	box-shadow: var(--ds-shadow-success);
}
.ds-btn--warning {
	background: var(--ds-gradient-warning);
	color: #1F1300;
}
.ds-btn--danger {
	background: var(--ds-gradient-danger);
	color: var(--ds-color-primary-contrast);
	box-shadow: var(--ds-shadow-danger);
}
.ds-btn--danger-ghost {
	background: transparent;
	border-color: rgba(251, 113, 133, 0.4);
	color: var(--ds-color-danger-text);
}
.ds-btn--danger-ghost:hover { background: var(--ds-color-danger-soft); border-color: rgba(251, 113, 133, 0.6); }

/* Sizes */
.ds-btn--sm    { height: var(--ds-control-h-sm); padding: 0 var(--ds-space-3); font-size: var(--ds-text-xs); }
.ds-btn--lg    { height: var(--ds-control-h-lg); padding: 0 var(--ds-space-6); font-size: var(--ds-text-md); }
.ds-btn--xl    { height: var(--ds-control-h-xl); padding: 0 var(--ds-space-8); font-size: var(--ds-text-lg); }
.ds-btn--block { display: flex; width: 100%; }
.ds-btn--icon  { padding: 0; width: var(--ds-control-h); }
.ds-btn--icon.ds-btn--sm { width: var(--ds-control-h-sm); }
.ds-btn--icon.ds-btn--lg { width: var(--ds-control-h-lg); }
.ds-btn--pill  { border-radius: var(--ds-radius-pill); padding-left: var(--ds-space-5); padding-right: var(--ds-space-5); }

/* Loading state */
.ds-btn.is-loading { color: transparent !important; pointer-events: none; }
.ds-btn.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid currentColor;
	color: var(--ds-color-text);
	border-right-color: transparent;
	border-radius: 50%;
	animation: ds-spin 720ms linear infinite;
}
.ds-btn--primary.is-loading::after,
.ds-btn--success.is-loading::after,
.ds-btn--danger.is-loading::after { color: var(--ds-color-primary-contrast); }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Reset for kbd inside button */
.ds-btn .ds-kbd { margin-left: auto; }

/* ============================================================ */
/* KBD                                                            */
/* ============================================================ */

.ds-kbd {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 6px;
	background: var(--ds-color-surface);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-xs);
	color: var(--ds-color-text-muted);
	font: 600 var(--ds-text-2xs)/1 var(--ds-font-mono);
	letter-spacing: var(--ds-tracking-wider);
}

/* ============================================================ */
/* INPUT / TEXTAREA / SELECT                                      */
/* ============================================================ */

.ds-input,
.ds-textarea,
.ds-select {
	width: 100%;
	min-width: 0;
	height: var(--ds-control-h);
	padding: 0 var(--ds-space-3);
	background: var(--ds-color-surface);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-input);
	color: var(--ds-color-text);
	font-family: inherit;
	font-size: var(--ds-text-sm);
	line-height: 1.4;
	outline: none;
	box-shadow: var(--ds-shadow-xs);
	transition: var(--ds-transition-border), var(--ds-transition-shadow), var(--ds-transition-bg);
	-webkit-appearance: none;
	appearance: none;
}
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--ds-color-text-subtle); opacity: 1; }

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

.ds-input:focus,
.ds-textarea:focus,
.ds-select:focus {
	border-color: var(--ds-color-border-focus);
	box-shadow: var(--ds-ring-focus);
	background: var(--ds-color-surface-active);
}

.ds-input[aria-invalid="true"],
.ds-input.is-invalid,
.ds-textarea.is-invalid {
	border-color: var(--ds-color-border-error);
	box-shadow: var(--ds-ring-danger);
}

.ds-input[disabled],
.ds-textarea[disabled],
.ds-select[disabled] {
	opacity: var(--ds-opacity-disabled);
	cursor: not-allowed;
}

.ds-textarea {
	height: auto;
	min-height: 96px;
	padding: var(--ds-space-3) var(--ds-space-3);
	resize: vertical;
}

/* Native select chevron */
.ds-select {
	padding-right: var(--ds-space-8);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A5A0B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--ds-space-3) center;
	background-size: 14px 14px;
}

/* Sizes */
.ds-input--sm, .ds-select--sm, .ds-textarea--sm { height: var(--ds-control-h-sm); font-size: var(--ds-text-xs); padding: 0 var(--ds-space-3); }
.ds-input--lg, .ds-select--lg                   { height: var(--ds-control-h-lg); font-size: var(--ds-text-md); padding: 0 var(--ds-space-4); }
.ds-input--xl, .ds-select--xl                   { height: var(--ds-control-h-xl); font-size: var(--ds-text-lg); padding: 0 var(--ds-space-5); }

/* ============================================================ */
/* FIELD WRAPPER (label + helper + error)                         */
/* ============================================================ */

.ds-field {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-1_5);
	min-width: 0;
}

.ds-label {
	display: block;
	font-size: var(--ds-text-xs);
	font-weight: var(--ds-font-semibold);
	color: var(--ds-color-text-secondary);
	letter-spacing: var(--ds-tracking-wide);
}
.ds-label--required::after {
	content: "*";
	color: var(--ds-color-danger-text);
	margin-left: 2px;
}

.ds-field__hint {
	font-size: var(--ds-text-xs);
	color: var(--ds-color-text-subtle);
	margin: 0;
}
.ds-field__error {
	font-size: var(--ds-text-xs);
	color: var(--ds-color-danger-text);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-1);
}

/* Input affixes (icon left, kbd right, button right) */
.ds-input-wrap {
	position: relative;
	display: block;
	width: 100%;
}
.ds-input-wrap__icon-left,
.ds-input-wrap__icon-right {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	color: var(--ds-color-text-muted);
	pointer-events: none;
}
.ds-input-wrap__icon-left  { left: var(--ds-space-3); }
.ds-input-wrap__icon-right { right: var(--ds-space-3); }
.ds-input-wrap--has-left  .ds-input { padding-left: 36px; }
.ds-input-wrap--has-right .ds-input { padding-right: 36px; }

.ds-input-wrap__action {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY(-50%);
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: transparent;
	border: 0;
	border-radius: var(--ds-radius-sm);
	color: var(--ds-color-text-muted);
	cursor: pointer;
	transition: var(--ds-transition-color), var(--ds-transition-bg);
}
.ds-input-wrap__action:hover { background: var(--ds-color-surface); color: var(--ds-color-text); }

/* ============================================================ */
/* CHECKBOX & RADIO                                               */
/* ============================================================ */

.ds-check,
.ds-radio {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-2);
	cursor: pointer;
	font-size: var(--ds-text-sm);
	color: var(--ds-color-text-secondary);
	user-select: none;
}
.ds-check input,
.ds-radio input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ds-check__box,
.ds-radio__dot {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: var(--ds-color-surface);
	border: 1.5px solid var(--ds-color-border-strong);
	transition: var(--ds-transition-border), var(--ds-transition-bg);
	position: relative;
}
.ds-check__box { border-radius: 5px; }
.ds-radio__dot { border-radius: 50%; }

.ds-check input:checked + .ds-check__box,
.ds-radio input:checked + .ds-radio__dot {
	background: var(--ds-color-primary);
	border-color: var(--ds-color-primary);
}
.ds-check input:checked + .ds-check__box::after {
	content: "";
	position: absolute;
	left: 5px; top: 1px;
	width: 5px; height: 10px;
	border: solid var(--ds-color-primary-contrast);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ds-radio input:checked + .ds-radio__dot::after {
	content: "";
	position: absolute;
	inset: 4px;
	background: var(--ds-color-primary-contrast);
	border-radius: 50%;
}
.ds-check input:focus-visible + .ds-check__box,
.ds-radio input:focus-visible + .ds-radio__dot { box-shadow: var(--ds-ring-focus); }

/* ============================================================ */
/* SWITCH                                                         */
/* ============================================================ */

.ds-switch {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-2);
	cursor: pointer;
	font-size: var(--ds-text-sm);
	color: var(--ds-color-text-secondary);
	user-select: none;
}
.ds-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.ds-switch__track {
	position: relative;
	width: 36px;
	height: 22px;
	background: var(--ds-color-border);
	border-radius: var(--ds-radius-pill);
	transition: var(--ds-transition-bg);
}
.ds-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: #FFFFFF;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	transition: transform var(--ds-dur-fast) var(--ds-ease-premium);
}
.ds-switch input:checked + .ds-switch__track { background: var(--ds-gradient-cta); }
.ds-switch input:checked + .ds-switch__track::after { transform: translateX(14px); }
.ds-switch input:focus-visible + .ds-switch__track { box-shadow: var(--ds-ring-focus); }

/* ============================================================ */
/* BADGE / PILL                                                   */
/* ============================================================ */

.ds-badge,
.ds-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-1);
	padding: 2px 8px;
	background: var(--ds-color-surface);
	color: var(--ds-color-text-secondary);
	font-size: var(--ds-text-2xs);
	font-weight: var(--ds-font-semibold);
	border-radius: var(--ds-radius-xs);
	white-space: nowrap;
}
.ds-pill { border-radius: var(--ds-radius-pill); padding: 3px 10px; }

.ds-badge--brand,    .ds-pill--brand    { background: var(--ds-color-primary-soft);  color: var(--ds-purple-300); }
.ds-badge--success,  .ds-pill--success  { background: var(--ds-color-success-soft);  color: var(--ds-color-success-text); }
.ds-badge--warning,  .ds-pill--warning  { background: var(--ds-color-warning-soft);  color: var(--ds-color-warning-text); }
.ds-badge--danger,   .ds-pill--danger   { background: var(--ds-color-danger-soft);   color: var(--ds-color-danger-text); }
.ds-badge--info,     .ds-pill--info     { background: var(--ds-color-info-soft);     color: var(--ds-color-info-text); }

.ds-badge--dot::before,
.ds-pill--dot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 6px currentColor;
}

/* ============================================================ */
/* ALERT                                                          */
/* ============================================================ */

.ds-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--ds-space-3);
	padding: var(--ds-space-3) var(--ds-space-4);
	background: var(--ds-color-surface);
	border: 1px solid var(--ds-color-border-subtle);
	border-left-width: 3px;
	border-radius: var(--ds-radius-md);
	color: var(--ds-color-text);
	font-size: var(--ds-text-sm);
	line-height: var(--ds-leading-relaxed);
}
.ds-alert--info     { background: var(--ds-color-info-soft);     border-left-color: var(--ds-color-info); }
.ds-alert--success  { background: var(--ds-color-success-soft);  border-left-color: var(--ds-color-success); }
.ds-alert--warning  { background: var(--ds-color-warning-soft);  border-left-color: var(--ds-color-warning); }
.ds-alert--danger   { background: var(--ds-color-danger-soft);   border-left-color: var(--ds-color-danger); }
.ds-alert__icon     { flex-shrink: 0; color: currentColor; margin-top: 2px; }
.ds-alert__title    { font-weight: var(--ds-font-semibold); margin: 0 0 2px; }
.ds-alert__body     { color: var(--ds-color-text-muted); margin: 0; }

/* ============================================================ */
/* TOOLTIP (CSS-only, uses native title fallback)                 */
/* ============================================================ */

.ds-tooltip {
	position: relative;
	display: inline-block;
}
.ds-tooltip__bubble {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--ds-color-bg-elevated);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-sm);
	color: var(--ds-color-text);
	font-size: var(--ds-text-xs);
	font-weight: var(--ds-font-medium);
	padding: 6px 10px;
	white-space: nowrap;
	box-shadow: var(--ds-shadow-md);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--ds-dur-fast) var(--ds-ease-out), transform var(--ds-dur-fast) var(--ds-ease-out);
	z-index: var(--ds-z-tooltip);
}
.ds-tooltip:hover .ds-tooltip__bubble,
.ds-tooltip:focus-within .ds-tooltip__bubble {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ============================================================ */
/* DROPDOWN MENU                                                  */
/* ============================================================ */

.ds-dropdown {
	position: relative;
	display: inline-flex;
}
.ds-dropdown__panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 200px;
	background: var(--ds-color-bg-elevated);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-lg);
	padding: var(--ds-space-1);
	box-shadow: var(--ds-shadow-xl);
	z-index: var(--ds-z-dropdown);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-4px) scale(0.98);
	transition: opacity var(--ds-dur-fast) var(--ds-ease-out), transform var(--ds-dur-fast) var(--ds-ease-out);
}
.ds-dropdown__panel--left  { right: auto; left: 0; }
.ds-dropdown[data-open="true"] .ds-dropdown__panel {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}
.ds-dropdown__item {
	display: flex;
	align-items: center;
	gap: var(--ds-space-2);
	width: 100%;
	padding: var(--ds-space-2) var(--ds-space-3);
	background: transparent;
	border: 0;
	border-radius: var(--ds-radius-sm);
	color: var(--ds-color-text);
	font: inherit;
	font-size: var(--ds-text-sm);
	cursor: pointer;
	text-align: left;
	text-decoration: none;
	transition: var(--ds-transition-bg), var(--ds-transition-color);
}
.ds-dropdown__item:hover     { background: var(--ds-color-surface); }
.ds-dropdown__item.is-active { background: var(--ds-color-surface-active); color: var(--ds-color-text-link); }
.ds-dropdown__item--danger   { color: var(--ds-color-danger-text); }
.ds-dropdown__item--danger:hover { background: var(--ds-color-danger-soft); }
.ds-dropdown__divider {
	height: 1px;
	margin: var(--ds-space-1) var(--ds-space-1);
	background: var(--ds-color-border-subtle);
}

/* ============================================================ */
/* TABS                                                           */
/* ============================================================ */

.ds-tabs {
	display: inline-flex;
	background: var(--ds-color-surface);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-lg);
	padding: 3px;
	gap: 2px;
}
.ds-tabs__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-1_5);
	height: 30px;
	padding: 0 var(--ds-space-3);
	background: transparent;
	border: 0;
	border-radius: var(--ds-radius-sm);
	color: var(--ds-color-text-muted);
	font: inherit;
	font-size: var(--ds-text-xs);
	font-weight: var(--ds-font-semibold);
	cursor: pointer;
	transition: var(--ds-transition-all);
}
.ds-tabs__btn:hover { color: var(--ds-color-text); }
.ds-tabs__btn[aria-selected="true"],
.ds-tabs__btn.is-active {
	background: var(--ds-gradient-cta);
	color: var(--ds-color-primary-contrast);
	box-shadow: 0 4px 12px -4px rgba(139, 92, 246, 0.5);
}

/* Tabs underline variant */
.ds-tabs--underline {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ds-color-border-subtle);
	border-radius: 0;
	padding: 0;
	gap: var(--ds-space-4);
}
.ds-tabs--underline .ds-tabs__btn {
	height: 40px;
	border-radius: 0;
	border-bottom: 2px solid transparent;
	padding: 0 var(--ds-space-1);
}
.ds-tabs--underline .ds-tabs__btn[aria-selected="true"],
.ds-tabs--underline .ds-tabs__btn.is-active {
	background: transparent;
	color: var(--ds-color-text);
	box-shadow: none;
	border-bottom-color: var(--ds-color-primary);
}

/* ============================================================ */
/* ACCORDION (native <details>)                                   */
/* ============================================================ */

.ds-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-2);
}
.ds-accordion__item {
	background: var(--ds-color-surface);
	border: 1px solid var(--ds-color-border-subtle);
	border-radius: var(--ds-radius-md);
	overflow: hidden;
	transition: var(--ds-transition-border);
}
.ds-accordion__item[open] { border-color: var(--ds-color-border); }
.ds-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ds-space-3);
	padding: var(--ds-space-3) var(--ds-space-4);
	cursor: pointer;
	font-size: var(--ds-text-sm);
	font-weight: var(--ds-font-semibold);
	color: var(--ds-color-text);
	list-style: none;
}
.ds-accordion__summary::-webkit-details-marker { display: none; }
.ds-accordion__summary::after {
	content: "";
	width: 12px;
	height: 12px;
	border-right: 1.5px solid var(--ds-color-text-muted);
	border-bottom: 1.5px solid var(--ds-color-text-muted);
	transform: rotate(45deg);
	transition: transform var(--ds-dur-fast) var(--ds-ease-out);
}
.ds-accordion__item[open] .ds-accordion__summary::after {
	transform: rotate(-135deg);
}
.ds-accordion__body {
	padding: 0 var(--ds-space-4) var(--ds-space-4);
	color: var(--ds-color-text-muted);
	font-size: var(--ds-text-sm);
	line-height: var(--ds-leading-relaxed);
}

/* ============================================================ */
/* BREADCRUMBS                                                    */
/* ============================================================ */

.ds-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ds-space-1_5);
	font-size: var(--ds-text-xs);
	color: var(--ds-color-text-muted);
}
.ds-breadcrumbs a {
	color: var(--ds-color-text-muted);
	text-decoration: none;
	transition: var(--ds-transition-color);
}
.ds-breadcrumbs a:hover { color: var(--ds-color-text); }
.ds-breadcrumbs__sep::before { content: "/"; color: var(--ds-color-text-subtle); }
.ds-breadcrumbs__current { color: var(--ds-color-text); font-weight: var(--ds-font-semibold); }

/* ============================================================ */
/* TABLE                                                          */
/* ============================================================ */

.ds-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ds-color-surface);
	border: 1px solid var(--ds-color-border-subtle);
	border-radius: var(--ds-radius-lg);
	overflow: hidden;
	font-size: var(--ds-text-sm);
	color: var(--ds-color-text);
}
.ds-table thead th {
	padding: var(--ds-space-3) var(--ds-space-4);
	text-align: left;
	color: var(--ds-color-text-muted);
	font-size: var(--ds-text-2xs);
	font-weight: var(--ds-font-bold);
	letter-spacing: var(--ds-tracking-wider);
	text-transform: uppercase;
	background: var(--ds-color-surface-muted);
	border-bottom: 1px solid var(--ds-color-border-subtle);
}
.ds-table tbody td {
	padding: var(--ds-space-3) var(--ds-space-4);
	border-bottom: 1px solid var(--ds-color-border-subtle);
	color: var(--ds-color-text);
	vertical-align: middle;
}
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover td { background: var(--ds-color-surface-hover); }

/* ============================================================ */
/* AVATAR                                                         */
/* ============================================================ */

.ds-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ds-gradient-cta);
	color: var(--ds-color-primary-contrast);
	font-size: var(--ds-text-sm);
	font-weight: var(--ds-font-bold);
	flex-shrink: 0;
	border: 2px solid transparent;
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-avatar--sm  { width: 28px; height: 28px; font-size: var(--ds-text-2xs); }
.ds-avatar--lg  { width: 56px; height: 56px; font-size: var(--ds-text-lg); }
.ds-avatar--xl  { width: 80px; height: 80px; font-size: var(--ds-text-2xl); }

.ds-avatar-stack { display: inline-flex; }
.ds-avatar-stack .ds-avatar + .ds-avatar { margin-left: -10px; border-color: var(--ds-color-bg); }

/* ============================================================ */
/* REDUCED MOTION                                                 */
/* ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.ds-btn,
	.ds-input, .ds-textarea, .ds-select,
	.ds-dropdown__panel,
	.ds-tooltip__bubble,
	.ds-switch__track::after,
	.ds-accordion__summary::after,
	.ds-tabs__btn {
		transition: none !important;
		animation: none !important;
	}
	.ds-btn:active { transform: none !important; }
}