/* Playful, domain-neutral components built on design-tokens.css. */

.ui-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Actions */
.ui-button {
  --button-bg: var(--bg-surface);
  --button-bg-hover: var(--bg-soft);
  --button-bg-active: var(--bg-control-idle);
  --button-fg: var(--text-primary);
  --button-fg-active: var(--button-fg);
  --button-border: var(--text-primary);
  --button-shadow: var(--shadow-pop-rest);
  --button-shadow-hover: var(--shadow-pop-hover);
  --button-shadow-active: var(--shadow-pop-pressed);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  padding: 0 var(--space-5);
  color: var(--button-fg);
  background: var(--button-bg);
  border: var(--stroke-default) solid var(--button-border);
  border-radius: var(--radius-control);
  box-shadow: var(--button-shadow);
  font: inherit;
  font-size: var(--text-label-lg);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-standard),
    box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
    color var(--motion-duration-fast),
    background-color var(--motion-duration-fast);
  -webkit-tap-highlight-color: transparent;
}

.ui-button:hover:not(:disabled):not([aria-busy="true"]) {
  background: var(--button-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--button-shadow-hover);
}

.ui-button:active:not(:disabled):not([aria-busy="true"]),
.ui-button[aria-pressed="true"] {
  color: var(--button-fg-active);
  background: var(--button-bg-active);
  transform: translateY(2px);
  box-shadow: var(--button-shadow-active);
}

.ui-button:focus-visible,
.ui-icon-button:focus-visible,
.ui-tab:focus-visible,
.ui-tooltip-trigger:focus-visible,
.ui-dialog__close:focus-visible {
  outline: var(--stroke-emphasis) solid var(--focus-ring);
  outline-offset: 3px;
}

.ui-button:disabled,
.ui-button[aria-busy="true"] {
  color: var(--text-disabled);
  background: var(--bg-soft);
  border-color: var(--border-disabled);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.ui-button[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  border: var(--stroke-default) solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-spin .7s linear infinite;
}

.ui-button--primary {
  --button-bg: var(--accent-solid);
  --button-bg-hover: var(--accent-solid-hover);
  --button-bg-active: var(--accent-solid-active);
  --button-fg: var(--on-accent);
  --button-fg-active: var(--on-accent-active);
}

.ui-button--secondary { --button-bg: var(--bg-surface); }

.ui-button--soft {
  --button-bg: var(--decor-sun);
  --button-bg-hover: var(--decor-sun-hover);
  --button-bg-active: var(--decor-sun-active);
}

.ui-button--danger {
  --button-bg: var(--danger-solid);
  --button-bg-hover: var(--danger-solid-hover);
  --button-bg-active: var(--danger-solid-active);
  --button-fg: var(--on-danger);
  --button-border: var(--danger-deep);
  --button-shadow: var(--shadow-pop-danger-rest);
  --button-shadow-hover: var(--shadow-pop-danger-hover);
  --button-shadow-active: var(--shadow-pop-danger-pressed);
}

.ui-button--ghost {
  --button-bg: transparent;
  --button-bg-hover: var(--accent-soft);
  --button-bg-active: var(--overlay-pressed);
  --button-border: transparent;
  --button-shadow: none;
  --button-shadow-hover: none;
  --button-shadow-active: none;
  padding-inline: var(--space-3);
}

.ui-button--ghost:hover:not(:disabled),
.ui-button--ghost:active:not(:disabled) { transform: none; }
.ui-button--sm { min-height: var(--control-sm); padding-inline: var(--space-4); font-size: var(--text-label-sm); }
.ui-button--lg { min-height: var(--control-lg); padding-inline: var(--space-6); font-size: var(--text-body-md); }
.ui-button svg,
.ui-icon-button svg { width: 1.15em; height: 1.15em; stroke-width: 2.4; }

.ui-icon-button,
.ui-dialog__close {
  display: inline-grid;
  width: var(--control-md);
  height: var(--control-md);
  padding: 0;
  place-items: center;
  color: var(--text-primary);
  background: var(--decor-sky);
  border: var(--stroke-default) solid var(--text-primary);
  border-radius: 50%;
  box-shadow: var(--shadow-pop-rest);
  font: inherit;
  cursor: pointer;
  transition: transform var(--motion-duration-fast) var(--motion-ease-bounce), box-shadow var(--motion-duration-fast), background-color var(--motion-duration-fast);
}
.ui-icon-button:hover:not(:disabled) { background: var(--decor-sky-soft); transform: rotate(7deg) translateY(-1px); box-shadow: var(--shadow-pop-hover); }
.ui-icon-button:active:not(:disabled),
.ui-icon-button[aria-pressed="true"] { background: var(--decor-grape); transform: translateY(2px); box-shadow: var(--shadow-pop-pressed); }
.ui-icon-button:disabled { color: var(--text-disabled); background: var(--bg-soft); border-color: var(--border-disabled); box-shadow: none; cursor: not-allowed; }

/* Selection controls */
.ui-switch,
.ui-check,
.ui-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-primary);
  font-size: var(--text-body-md);
  font-weight: var(--font-medium);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ui-switch:has(input:disabled),
.ui-check:has(input:disabled),
.ui-radio:has(input:disabled) { color: var(--text-disabled); cursor: not-allowed; }
.ui-switch input,
.ui-check input,
.ui-radio input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.ui-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 32px;
  background: var(--bg-control-idle);
  border: var(--stroke-default) solid var(--text-primary);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-inset-control);
  transition: background-color var(--motion-duration-normal), transform var(--motion-duration-fast) var(--motion-ease-bounce);
}
.ui-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: var(--bg-surface);
  border: var(--stroke-default) solid var(--text-primary);
  border-radius: 50%;
  box-shadow: var(--shadow-ambient-sm);
  transition: transform var(--motion-duration-normal) var(--motion-ease-bounce);
}
.ui-switch input:checked + .ui-switch__track { background: var(--decor-mint); }
.ui-switch input:checked + .ui-switch__track::after { transform: translateX(22px); }
.ui-switch:hover:not(:has(input:disabled)) .ui-switch__track { transform: scale(1.03); }
.ui-switch input:focus-visible + .ui-switch__track { outline: var(--stroke-emphasis) solid var(--focus-ring); outline-offset: 3px; }
.ui-switch input:disabled + .ui-switch__track { opacity: var(--opacity-disabled); border-color: var(--border-disabled); }

.ui-check__box,
.ui-radio__circle {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  place-items: center;
  background: var(--bg-surface);
  border: var(--stroke-default) solid var(--text-primary);
  transition: transform var(--motion-duration-fast) var(--motion-ease-bounce), background-color var(--motion-duration-fast);
}
.ui-check__box { border-radius: var(--radius-sm); }
.ui-radio__circle { border-radius: 50%; }
.ui-check__box::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: var(--stroke-emphasis) solid var(--text-primary);
  border-bottom: var(--stroke-emphasis) solid var(--text-primary);
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(.4);
  transition: opacity var(--motion-duration-fast), transform var(--motion-duration-normal) var(--motion-ease-bounce);
}
.ui-check input:checked + .ui-check__box { background: var(--decor-sun); transform: rotate(-3deg); }
.ui-check input:checked + .ui-check__box::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
.ui-check input:indeterminate + .ui-check__box { background: var(--decor-sky); transform: rotate(3deg); }
.ui-check input:indeterminate + .ui-check__box::after { width: 11px; height: 0; border: 0; border-bottom: var(--stroke-emphasis) solid var(--text-primary); opacity: 1; transform: none; }
.ui-radio__circle::after { content: ""; width: 11px; height: 11px; background: var(--text-primary); border-radius: 50%; opacity: 0; transform: scale(.2); transition: opacity var(--motion-duration-fast), transform var(--motion-duration-normal) var(--motion-ease-bounce); }
.ui-radio input:checked + .ui-radio__circle { background: var(--decor-grape); }
.ui-radio input:checked + .ui-radio__circle::after { opacity: 1; transform: scale(1); }
.ui-check input:focus-visible + .ui-check__box,
.ui-radio input:focus-visible + .ui-radio__circle { outline: var(--stroke-emphasis) solid var(--focus-ring); outline-offset: 3px; }
.ui-check input:disabled + .ui-check__box,
.ui-radio input:disabled + .ui-radio__circle { opacity: var(--opacity-disabled); border-color: var(--border-disabled); transform: none; }

/* Fields */
.ui-field { display: grid; gap: var(--space-2); }
.ui-field__label { color: var(--text-primary); font-size: var(--text-label-sm); font-weight: var(--font-semibold); }
.ui-field__control {
  width: 100%;
  min-height: var(--control-lg);
  padding: 0 var(--space-4);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: var(--stroke-default) solid var(--border-default);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-field);
  font: inherit;
  font-size: var(--text-body-md);
  transition: border-color var(--motion-duration-fast), box-shadow var(--motion-duration-fast), transform var(--motion-duration-fast), background-color var(--motion-duration-fast);
}
.ui-field__control::placeholder { color: var(--text-muted); }
.ui-field__control:hover:not(:disabled):not([readonly]) { border-color: var(--text-primary); }
.ui-field__control:focus-visible { border-color: var(--accent); outline: none; box-shadow: var(--shadow-field-focus); transform: translateY(-1px); }
.ui-field__control:disabled { color: var(--text-disabled); background: var(--bg-soft); border-color: var(--border-disabled); box-shadow: none; cursor: not-allowed; }
.ui-field__control[readonly] { background: var(--bg-soft); border-style: dashed; box-shadow: none; }
textarea.ui-field__control { min-height: 8rem; padding-block: var(--space-3); line-height: var(--leading-body-md); resize: vertical; }
.ui-field__select-wrap { position: relative; }
.ui-field__select-wrap::after { content: "⌄"; position: absolute; top: 50%; right: var(--space-4); color: var(--text-primary); font-size: 1.25rem; font-weight: var(--font-bold); pointer-events: none; transform: translateY(-58%); }
select.ui-field__control { padding-right: var(--space-10); appearance: none; }
.ui-field__hint { color: var(--text-muted); font-size: var(--text-caption); line-height: var(--leading-caption); }
.ui-field--success .ui-field__control { border-color: var(--success-fg); box-shadow: var(--shadow-field-success); }
.ui-field--success .ui-field__hint { color: var(--success-fg); font-weight: var(--font-medium); }
.ui-field--error .ui-field__control { border-color: var(--danger-fg); box-shadow: var(--shadow-field-error); }
.ui-field--error .ui-field__hint { color: var(--danger-fg); font-weight: var(--font-medium); }

/* Navigation and status */
.ui-tabs { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--bg-soft); border: var(--stroke-default) solid var(--text-primary); border-radius: calc(var(--radius-control) + var(--space-1)); }
.ui-tab { min-height: 38px; padding: 0 var(--space-4); color: var(--text-secondary); background: transparent; border: 0; border-radius: var(--radius-control); font: inherit; font-size: var(--text-label-sm); font-weight: var(--font-semibold); cursor: pointer; transition: background-color var(--motion-duration-fast), transform var(--motion-duration-fast) var(--motion-ease-bounce); }
.ui-tab:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-surface); }
.ui-tab[aria-selected="true"] { color: var(--on-decor); background: var(--decor-sun); box-shadow: var(--shadow-tab-selected); transform: translateY(-1px); }
.ui-tab:disabled { color: var(--text-disabled); cursor: not-allowed; }

.ui-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; color: var(--text-primary); background: var(--accent-soft); border: var(--stroke-subtle) solid var(--text-primary); border-radius: var(--radius-pill); font-size: var(--text-label-sm); font-weight: var(--font-semibold); }
.ui-badge::before { content: ""; width: 7px; height: 7px; background: currentColor; border-radius: 50%; }
.ui-badge--mint { background: var(--decor-mint-soft); }
.ui-badge--sky,
.ui-badge--info { background: var(--info-bg); }
.ui-badge--grape { background: var(--decor-grape-soft); }
.ui-badge--warning { background: var(--warning-bg); color: var(--warning-fg); border-color: currentColor; }
.ui-badge--danger { background: var(--danger-bg); color: var(--danger-fg); border-color: currentColor; }

/* Surfaces */
.ui-card { position: relative; padding: var(--space-6); background: var(--bg-surface); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-card); box-shadow: var(--shadow-pop-card); transition: transform var(--motion-duration-normal) var(--motion-ease-bounce), box-shadow var(--motion-duration-normal); }
.ui-card:hover { transform: translateY(-3px) rotate(-.25deg); box-shadow: var(--shadow-pop-card-hover); }
.ui-card__icon { display: grid; width: var(--control-md); height: var(--control-md); margin-bottom: var(--space-5); place-items: center; color: var(--on-decor); background: var(--decor-sun); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-control); font-size: 22px; transform: rotate(-3deg); }
.ui-card--mint .ui-card__icon { background: var(--decor-mint); transform: rotate(3deg); }
.ui-card--sky .ui-card__icon { background: var(--decor-sky); }
.ui-card__title { margin: 0; color: var(--text-primary); font-size: var(--text-title-lg); font-weight: var(--font-semibold); line-height: var(--leading-title-lg); }
.ui-card__body { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }
.ui-gradient-surface { color: var(--text-primary); background: var(--gradient-warm); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-lg); }
.ui-gradient-surface--fresh { background: var(--gradient-fresh); }
.ui-gradient-surface--dream { background: var(--gradient-dream); }

.ui-toast { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); color: var(--on-decor); background: var(--decor-mint); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-control); box-shadow: var(--shadow-pop-rest); }
.ui-toast--info { background: var(--decor-sky); }
.ui-toast--warning { background: var(--decor-sun); }
.ui-toast--danger { color: var(--on-danger); background: var(--danger-solid); border-color: var(--danger-deep); box-shadow: var(--shadow-pop-danger-rest); }
.ui-toast__icon { font-size: 1.25rem; line-height: 1; }
.ui-toast__title { display: block; margin-bottom: 2px; font-size: var(--text-label-lg); font-weight: var(--font-semibold); }
.ui-toast__body { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }

/* Progress and loading */
.ui-progress { display: grid; gap: var(--space-2); }
.ui-progress__meta { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--text-secondary); font-size: var(--text-label-sm); font-weight: var(--font-semibold); }
.ui-progress__track { height: 18px; overflow: hidden; background: var(--bg-control-idle); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-pill); box-shadow: var(--shadow-inset-control); }
.ui-progress__bar { display: block; width: var(--progress, 0%); height: 100%; background: var(--decor-mint); border-right: var(--stroke-default) solid var(--text-primary); transition: width var(--motion-duration-slow) var(--motion-ease-standard); }
.ui-skeleton { position: relative; overflow: hidden; min-height: 1em; background: var(--bg-control-idle); border-radius: var(--radius-sm); }
.ui-skeleton::after { content: ""; position: absolute; inset: 0; background: var(--gradient-shimmer); transform: translateX(-100%); animation: ui-shimmer 1.4s infinite; }
.ui-skeleton--title { width: 68%; height: 1.5rem; }
.ui-skeleton--text { width: 100%; height: .875rem; }
.ui-skeleton--short { width: 44%; }

/* Tooltip, popover and dialog */
.ui-tooltip-trigger { position: relative; }
.ui-tooltip-trigger::after { content: attr(data-tooltip); position: absolute; z-index: var(--z-dropdown); left: 50%; bottom: calc(100% + var(--space-3)); width: max-content; max-width: 15rem; padding: var(--space-2) var(--space-3); color: var(--text-inverse); background: var(--text-primary); border-radius: var(--radius-sm); box-shadow: var(--shadow-ambient-md); font-size: var(--text-caption); font-weight: var(--font-medium); line-height: var(--leading-caption); opacity: 0; pointer-events: none; transform: translate(-50%, var(--space-1)); transition: opacity var(--motion-duration-fast), transform var(--motion-duration-fast); }
.ui-tooltip-trigger:hover::after,
.ui-tooltip-trigger:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.ui-popover { position: relative; padding: var(--space-5); color: var(--text-primary); background: var(--bg-translucent); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-card); box-shadow: var(--shadow-ambient-md); backdrop-filter: blur(var(--blur-overlay)); }
.ui-popover::before { content: ""; position: absolute; top: -7px; left: 28px; width: 12px; height: 12px; background: var(--bg-surface); border-top: var(--stroke-default) solid var(--text-primary); border-left: var(--stroke-default) solid var(--text-primary); transform: rotate(45deg); }
.ui-dialog { width: min(calc(100% - 2rem), 32rem); padding: 0; color: var(--text-primary); background: var(--bg-surface); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-ambient-lg), var(--shadow-pop-card); }
.ui-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(var(--blur-overlay)); }
.ui-dialog__inner { display: grid; gap: var(--space-5); padding: var(--space-6); }
.ui-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.ui-dialog__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-heading-3); font-weight: var(--font-regular); line-height: var(--leading-heading-3); }
.ui-dialog__body { margin: 0; color: var(--text-secondary); font-size: var(--text-body-md); line-height: var(--leading-body-md); }
.ui-dialog__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.ui-dialog__close { width: var(--control-sm); height: var(--control-sm); background: var(--bg-soft); box-shadow: none; }

@keyframes ui-spin { to { transform: rotate(1turn); } }
@keyframes ui-shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  .ui-icon-button,
  .ui-switch__track,
  .ui-switch__track::after,
  .ui-check__box,
  .ui-check__box::after,
  .ui-radio__circle,
  .ui-radio__circle::after,
  .ui-card,
  .ui-tab,
  .ui-progress__bar,
  .ui-tooltip-trigger::after { transition: none; }
  .ui-button[aria-busy="true"]::before,
  .ui-skeleton::after { animation: none; }
}

@media (forced-colors: active) {
  .ui-button,
  .ui-icon-button,
  .ui-switch__track,
  .ui-check__box,
  .ui-radio__circle,
  .ui-field__control,
  .ui-tab,
  .ui-card,
  .ui-badge,
  .ui-toast,
  .ui-progress__track,
  .ui-dialog,
  .ui-popover { forced-color-adjust: auto; border-color: ButtonText; }
  .ui-check input:checked + .ui-check__box::after { border-color: HighlightText; }
  .ui-radio input:checked + .ui-radio__circle::after { background: HighlightText; }
  .ui-progress__bar { background: Highlight; }
}

/* Complex navigation */
.ui-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--text-label-sm); }
.ui-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.ui-breadcrumb li:not(:last-child)::after { content: "/"; color: var(--border-default); font-weight: var(--font-bold); }
.ui-breadcrumb a { color: var(--text-secondary); text-underline-offset: 3px; }
.ui-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-pagination__item { display: grid; min-width: var(--control-md); height: var(--control-md); padding: 0 var(--space-3); place-items: center; color: var(--text-primary); background: var(--bg-surface); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-control); box-shadow: var(--shadow-pop-rest); font: inherit; font-weight: var(--font-semibold); cursor: pointer; }
.ui-pagination__item[aria-current="page"] { background: var(--decor-sun); transform: translateY(-1px); }
.ui-pagination__item:active:not(:disabled) { transform: translateY(2px); box-shadow: var(--shadow-pop-pressed); }
.ui-stepper { display: grid; grid-template-columns: repeat(var(--steps, 3), 1fr); padding: 0; list-style: none; }
.ui-stepper__item { position: relative; display: grid; justify-items: center; gap: var(--space-2); color: var(--text-muted); text-align: center; font-size: var(--text-label-sm); font-weight: var(--font-semibold); }
.ui-stepper__item:not(:last-child)::before { content: ""; position: absolute; z-index: 0; top: 17px; left: 55%; width: 90%; height: var(--stroke-default); background: var(--border-default); }
.ui-stepper__dot { z-index: 1; display: grid; width: 36px; height: 36px; place-items: center; background: var(--bg-surface); border: var(--stroke-default) solid var(--text-primary); border-radius: 50%; box-shadow: var(--shadow-pop-rest); }
.ui-stepper__item[data-state="complete"] .ui-stepper__dot { background: var(--decor-mint); }
.ui-stepper__item[aria-current="step"] { color: var(--text-primary); }
.ui-stepper__item[aria-current="step"] .ui-stepper__dot { background: var(--decor-sun); transform: scale(1.08) rotate(-4deg); }

/* Menus, comboboxes and disclosure */
.ui-menu { min-width: 13rem; padding: var(--space-2); background: var(--bg-elevated); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-card); box-shadow: var(--shadow-ambient-lg), var(--shadow-pop-card); }
.ui-menu__item { display: flex; width: 100%; min-height: var(--control-md); align-items: center; gap: var(--space-3); padding: 0 var(--space-3); color: var(--text-primary); background: transparent; border: 0; border-radius: var(--radius-control); font: inherit; text-align: left; cursor: pointer; }
.ui-menu__item:hover, .ui-menu__item:focus-visible { background: var(--accent-soft); outline: none; }
.ui-menu__item[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: var(--font-bold); }
.ui-menu__item--danger { color: var(--danger-fg); }
.ui-menu__separator { height: var(--stroke-hairline); margin: var(--space-2); background: var(--border-subtle); }
.ui-combobox { position: relative; }
.ui-combobox__input-wrap { position: relative; }
.ui-combobox__input-wrap .ui-icon { position: absolute; top: 50%; left: var(--space-4); transform: translateY(-50%); pointer-events: none; }
.ui-combobox__input-wrap .ui-field__control { padding-left: 2.75rem; }
.ui-combobox__list { position: absolute; z-index: var(--z-dropdown); top: calc(100% + var(--space-2)); right: 0; left: 0; max-height: 17rem; overflow: auto; }
.ui-accordion { display: grid; gap: var(--space-3); }
.ui-accordion__item { overflow: clip; background: var(--bg-surface); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-card); box-shadow: var(--shadow-pop-rest); }
.ui-accordion__trigger { display: flex; width: 100%; min-height: var(--control-lg); align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); color: var(--text-primary); background: transparent; border: 0; font: inherit; font-weight: var(--font-semibold); text-align: left; cursor: pointer; }
.ui-accordion__trigger::after { content: "+"; font-size: 1.5rem; transition: transform var(--motion-duration-normal) var(--motion-ease-bounce); }
.ui-accordion__trigger[aria-expanded="true"] { background: var(--decor-sun-soft); }
.ui-accordion__trigger[aria-expanded="true"]::after { transform: rotate(45deg); }
.ui-accordion__panel { padding: 0 var(--space-4) var(--space-4); color: var(--text-secondary); line-height: var(--leading-body-md); }

/* Data, date and range */
.ui-table-wrap { overflow-x: auto; border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-card); box-shadow: var(--shadow-pop-card); }
.ui-table { width: 100%; min-width: 42rem; border-collapse: collapse; background: var(--bg-surface); }
.ui-table th, .ui-table td { padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-hairline) solid var(--border-subtle); text-align: left; vertical-align: middle; }
.ui-table th { background: var(--bg-soft); font-size: var(--text-label-sm); font-weight: var(--font-bold); }
.ui-table tbody tr:hover { background: var(--accent-soft); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-date-picker { width: min(100%, 21rem); padding: var(--space-4); background: var(--bg-elevated); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-card); box-shadow: var(--shadow-pop-card); }
.ui-date-picker__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); font-weight: var(--font-semibold); }
.ui-date-picker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.ui-date-picker__weekday, .ui-date-picker__day { display: grid; aspect-ratio: 1; place-items: center; border-radius: var(--radius-sm); font-size: var(--text-label-sm); }
.ui-date-picker__weekday { color: var(--text-muted); font-weight: var(--font-semibold); }
.ui-date-picker__day { color: var(--text-primary); background: transparent; border: 0; font: inherit; cursor: pointer; }
.ui-date-picker__day:hover { background: var(--accent-soft); }
.ui-date-picker__day[aria-selected="true"] { background: var(--decor-sun); border: var(--stroke-default) solid var(--text-primary); box-shadow: var(--shadow-pop-rest); font-weight: var(--font-bold); transform: rotate(-3deg); }
.ui-range { width: 100%; accent-color: var(--accent); cursor: pointer; }
.ui-range::-webkit-slider-runnable-track { height: 10px; background: var(--bg-control-idle); border: var(--stroke-default) solid var(--text-primary); border-radius: var(--radius-pill); }
.ui-range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; appearance: none; background: var(--decor-sun); border: var(--stroke-default) solid var(--text-primary); border-radius: 50%; box-shadow: var(--shadow-pop-rest); }

/* Upload, app shell and empty states */
.ui-dropzone { display: grid; min-height: 13rem; padding: var(--space-6); place-items: center; align-content: center; gap: var(--space-3); color: var(--text-secondary); background: var(--gradient-fresh); border: var(--stroke-emphasis) dashed var(--text-primary); border-radius: var(--radius-lg); text-align: center; cursor: pointer; }
.ui-dropzone:is(:hover, [data-dragging="true"]) { background: var(--decor-mint-soft); transform: rotate(-.25deg); }
.ui-dropzone__icon { display: grid; width: 56px; height: 56px; place-items: center; color: var(--on-decor); background: var(--decor-mint); border: var(--stroke-default) solid var(--text-primary); border-radius: 50%; box-shadow: var(--shadow-pop-rest); }
.ui-app-shell { display: grid; min-height: 100%; grid-template-columns: 16rem minmax(0, 1fr); }
.ui-sidebar { padding: var(--space-5); background: var(--bg-soft); border-right: var(--stroke-default) solid var(--text-primary); }
.ui-sidebar__nav { display: grid; gap: var(--space-2); }
.ui-sidebar__link { display: flex; min-height: var(--control-md); align-items: center; gap: var(--space-3); padding: 0 var(--space-3); color: var(--text-secondary); border-radius: var(--radius-control); font-weight: var(--font-semibold); text-decoration: none; }
.ui-sidebar__link:is(:hover, [aria-current="page"]) { color: var(--on-decor); background: var(--decor-sun); border: var(--stroke-default) solid var(--text-primary); box-shadow: var(--shadow-pop-rest); }
.ui-topbar { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-6); background: var(--bg-translucent); border-bottom: var(--stroke-default) solid var(--text-primary); backdrop-filter: blur(var(--blur-overlay)); }
.ui-empty { display: grid; min-height: 19rem; padding: var(--space-8); place-items: center; align-content: center; gap: var(--space-3); color: var(--text-secondary); background: var(--bg-soft); border: var(--stroke-default) dashed var(--border-default); border-radius: var(--radius-lg); text-align: center; }
.ui-empty__art { display: grid; width: 72px; height: 72px; place-items: center; color: var(--on-decor); background: var(--decor-grape); border: var(--stroke-default) solid var(--text-primary); border-radius: 42% 58% 55% 45%; box-shadow: var(--shadow-pop-card); font-size: 2rem; transform: rotate(-6deg); }
.ui-empty__title { margin: var(--space-2) 0 0; color: var(--text-primary); font-family: var(--font-heading); font-size: var(--text-heading-3); font-weight: var(--font-regular); }
.ui-empty__body { max-width: 28rem; margin: 0; }

@media (max-width: 51.25rem) {
  .ui-app-shell { grid-template-columns: 1fr; }
  .ui-sidebar { border-right: 0; border-bottom: var(--stroke-default) solid var(--text-primary); }
  .ui-stepper__label { font-size: 0; }
}