@charset "UTF-8";
/* -----------------------------------------------------------------------------
 * 1. Tokens + base (dark theme)
 *
 * Single dark palette matching the brand. The only place raw hex / px values
 * are allowed. Components read these via `var(--sp-*)`. Scoped to `.sp-root`
 * so tokens do not leak when ds.css is linked on Bootstrap pages. Override
 * tokens on a nested `.sp-root` to experiment with a different palette.
 * --------------------------------------------------------------------------- */
.sp-root {
  --sp-color-brand: #a5d21d;
  --sp-color-brand-soft: rgba(165, 210, 29, 0.18);
  --sp-color-brand-fg: #141414;
  --sp-color-bg: #141414;
  --sp-color-surface: #1d1d1d;
  --sp-color-surface-muted: #262626;
  --sp-color-border: #2d2d2d;
  --sp-color-border-strong: #3d3d3d;
  --sp-color-overlay: rgba(255, 255, 255, 0.06);
  --sp-color-overlay-soft: rgba(255, 255, 255, 0.04);
  --sp-color-text: #f5f5f5;
  --sp-color-text-muted: #a8a8a8;
  --sp-color-text-subtle: #6e6e6e;
  --sp-color-success: #4ade80;
  --sp-color-success-soft: rgba(74, 222, 128, 0.14);
  --sp-color-warning: #fbbf24;
  --sp-color-warning-soft: rgba(251, 191, 36, 0.14);
  --sp-color-danger: #f87171;
  --sp-color-danger-soft: rgba(248, 113, 113, 0.16);
  --sp-color-info: #60a5fa;
  --sp-color-info-soft: rgba(96, 165, 250, 0.14);
  --sp-color-backdrop: rgba(0, 0, 0, 0.58);
  --sp-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sp-text-body: 0.9rem;
  --sp-text-small: calc(var(--sp-text-body) * 0.93);
  --sp-text-medium: calc(var(--sp-text-body) * 1.13);
  --sp-text-large: calc(var(--sp-text-body) * 1.6);
  --sp-text-xl: calc(var(--sp-text-body) * 2.1);
  --sp-weight-regular: 400;
  --sp-weight-medium: 500;
  --sp-weight-semibold: 600;
  --sp-weight-bold: 700;
  --sp-line-tight: 1.25;
  --sp-line-base: 1.5;
  --sp-tracking-tight: -0.01em;
  --sp-space-1: 0.25rem;
  --sp-space-2: 0.5rem;
  --sp-space-3: 0.75rem;
  --sp-space-4: 1rem;
  --sp-space-5: 1.5rem;
  --sp-space-6: 2rem;
  --sp-space-8: 3rem;
  --sp-container-max: 1120px;
  --sp-container-gutter: var(--sp-space-5);
  --sp-inset-sm: var(--sp-space-3);
  --sp-inset-md: var(--sp-space-4);
  --sp-inset-lg: var(--sp-space-5);
  --sp-pad-block: var(--sp-space-4);
  --sp-pad-inline: var(--sp-space-5);
  --sp-control-pad: var(--sp-space-1) var(--sp-space-3);
  --sp-control-min-height: calc(var(--sp-text-small) * var(--sp-line-base) + var(--sp-space-1) * 2 + 2px);
  --sp-gap-sm: var(--sp-space-2);
  --sp-gap: var(--sp-space-3);
  --sp-gap-lg: var(--sp-space-4);
  --sp-radius-sm: 4px;
  --sp-radius-md: 8px;
  --sp-radius-lg: 14px;
  --sp-radius-full: 9999px;
  --sp-radius-component: var(--sp-radius-md);
  --sp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sp-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
  --sp-focus-ring: 0 0 0 3px var(--sp-color-brand-soft);
  --sp-transition: 150ms ease;
  --sp-hover-darken: 18%;
  font-family: var(--sp-font-sans);
  color: var(--sp-color-text);
  font-size: var(--sp-text-body);
  line-height: var(--sp-line-base);
}

/* -----------------------------------------------------------------------------
 * 1.5 SCSS helpers (compile-time only — emit no CSS by themselves)
 * --------------------------------------------------------------------------- */
.sp-tree-select__panel, .sp-tabs__list, .sp-pagination__list, .sp-data-grid__scroll, .sp-autocomplete__menu, .sp-dropdown__menu, .sp-card__tabs {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sp-tree-select__panel::-webkit-scrollbar, .sp-tabs__list::-webkit-scrollbar, .sp-pagination__list::-webkit-scrollbar, .sp-data-grid__scroll::-webkit-scrollbar, .sp-autocomplete__menu::-webkit-scrollbar, .sp-dropdown__menu::-webkit-scrollbar, .sp-card__tabs::-webkit-scrollbar {
  display: none;
}

.sp-button:focus-visible,
.sp-field__input:focus-visible,
.sp-tag-input:focus-within,
.sp-tag-input__remove:focus-visible,
.sp-alert__close:focus-visible,
.sp-modal__close:focus-visible,
.sp-dropdown__trigger:focus-visible,
.sp-checkbox__input:focus-visible + .sp-checkbox__box,
.sp-tree-select__checkbox:focus-visible + .sp-tree-select__box,
.sp-tabs__tab:focus-visible {
  outline: none;
  box-shadow: var(--sp-focus-ring);
}

.sp-accordion__trigger:focus-visible {
  outline: none;
  box-shadow: inset var(--sp-focus-ring);
}

/* -----------------------------------------------------------------------------
 * 2.1 Layout — container & columns
 *
 * .sp-container              centered max-width wrapper
 * .sp-container--{size}      narrow | wide | fluid
 * .sp-row                    flex row with wrap + gap
 * .sp-col                    equal-width column (default)
 * .sp-col--{fraction}        half | third | two-thirds | quarter | full | auto
 * --------------------------------------------------------------------------- */
.sp-container {
  width: 100%;
  max-width: var(--sp-container-max);
  margin-inline: auto;
  padding-inline: var(--sp-container-gutter);
}

.sp-container--narrow {
  max-width: 720px;
}

.sp-container--wide {
  max-width: 1440px;
}

.sp-container--fluid {
  max-width: none;
}

.sp-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-gap);
  margin: 0;
  padding: 0;
}

.sp-row--sm {
  gap: var(--sp-gap-sm);
}

.sp-row--lg {
  gap: var(--sp-gap-lg);
}

.sp-row--center {
  align-items: center;
}

.sp-row--end {
  justify-content: flex-end;
}

.sp-col {
  flex: 1 1 0;
  min-width: 0;
}

.sp-col--auto {
  flex: 0 0 auto;
}

.sp-col--full {
  flex: 0 0 100%;
  width: 100%;
}

.sp-col--half {
  flex: 1 1 calc(50% - var(--sp-gap) / 2);
  min-width: min(100%, 16rem);
}

.sp-col--third {
  flex: 1 1 calc(33.333% - var(--sp-gap) * 2 / 3);
  min-width: min(100%, 14rem);
}

.sp-col--two-thirds {
  flex: 2 1 calc(66.666% - var(--sp-gap) / 3);
  min-width: min(100%, 16rem);
}

.sp-col--quarter {
  flex: 1 1 calc(25% - var(--sp-gap) * 3 / 4);
  min-width: min(100%, 12rem);
}

/* -----------------------------------------------------------------------------
 * 2.2 Spacing & typography helpers
 *
 * Type scale:  .sp-text-{small|body|medium|large|xl}
 * Weight:      .sp-font-{regular|medium|semibold|bold}
 * Color:       .sp-text-{muted|subtle|danger|success}
 * Headings:    .sp-heading | .sp-heading-lg | .sp-heading-xl
 * Layout:      .sp-stack, .sp-p-*, .sp-mb-*, .sp-w-full
 * --------------------------------------------------------------------------- */
.sp-text-body {
  font-size: var(--sp-text-body);
  line-height: var(--sp-line-base);
}

.sp-text-small {
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-base);
}

.sp-text-medium {
  font-size: var(--sp-text-medium);
  line-height: var(--sp-line-tight);
}

.sp-text-large {
  font-size: var(--sp-text-large);
  line-height: var(--sp-line-tight);
  letter-spacing: var(--sp-tracking-tight);
}

.sp-text-xl {
  font-size: var(--sp-text-xl);
  line-height: var(--sp-line-tight);
  letter-spacing: var(--sp-tracking-tight);
}

.sp-font-regular {
  font-weight: var(--sp-weight-regular);
}

.sp-font-medium {
  font-weight: var(--sp-weight-medium);
}

.sp-font-semibold {
  font-weight: var(--sp-weight-semibold);
}

.sp-font-bold {
  font-weight: var(--sp-weight-bold);
}

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

.sp-text-subtle {
  color: var(--sp-color-text-subtle);
}

.sp-text-danger {
  color: var(--sp-color-danger);
}

.sp-text-success {
  color: var(--sp-color-success);
}

.sp-heading {
  margin: 0;
  font-size: var(--sp-text-medium);
  font-weight: var(--sp-weight-semibold);
  line-height: var(--sp-line-tight);
  color: var(--sp-color-text);
}

.sp-heading-lg {
  margin: 0;
  font-size: var(--sp-text-large);
  font-weight: var(--sp-weight-bold);
  line-height: var(--sp-line-tight);
  letter-spacing: var(--sp-tracking-tight);
  color: var(--sp-color-text);
}

.sp-heading-xl {
  margin: 0;
  font-size: var(--sp-text-xl);
  font-weight: var(--sp-weight-bold);
  line-height: var(--sp-line-tight);
  letter-spacing: var(--sp-tracking-tight);
  color: var(--sp-color-text);
}

.sp-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap);
}

.sp-stack--sm {
  gap: var(--sp-gap-sm);
}

.sp-stack--lg {
  gap: var(--sp-gap-lg);
}

.sp-p-sm {
  padding: var(--sp-inset-sm);
}

.sp-p-md {
  padding: var(--sp-inset-md);
}

.sp-p-lg {
  padding: var(--sp-inset-lg);
}

.sp-m-0 {
  margin: 0;
}

.sp-mb-sm {
  margin-bottom: var(--sp-inset-sm);
}

.sp-mb-md {
  margin-bottom: var(--sp-inset-md);
}

.sp-mb-lg {
  margin-bottom: var(--sp-inset-lg);
}

.sp-w-full {
  width: 100%;
}

/* -----------------------------------------------------------------------------
 * 2.3 Section backgrounds
 *
 * Full-bleed decorative backgrounds for <section> (or any block-level wrapper).
 * Unlike <c-paper>, these carry no padding, radius, or card chrome — pair with
 * Bootstrap spacing utilities and an inner .container.
 *
 * .sp-bg-aurora   multi-radial mesh (same tint as <c-paper bg="aurora">)
 * .sp-bg-stripes  diagonal hatch (same tint as <c-paper bg="stripes">)
 * .sp-bg-dots     dot grid (same tint as <c-paper bg="dots">)
 * .sp-bg-prism    faceted gradients + subtle scanlines
 * .sp-bg-topo     topographic contour rings
 * --------------------------------------------------------------------------- */
.sp-bg-aurora {
  background-color: var(--sp-color-bg);
  background-image: radial-gradient(ellipse 70% 55% at 0% 0%, var(--sp-color-brand-soft) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 100% 100%, var(--sp-color-info-soft) 0%, transparent 55%), radial-gradient(ellipse 55% 40% at 50% 80%, var(--sp-color-warning-soft) 0%, transparent 60%);
}

.sp-bg-stripes {
  background-color: var(--sp-color-bg);
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, var(--sp-color-overlay-soft) 14px 15px);
}

.sp-bg-dots {
  background-color: var(--sp-color-bg);
  background-image: radial-gradient(circle at 1px 1px, var(--sp-color-border-strong) 1px, transparent 0);
  background-size: 20px 20px;
}

.sp-bg-prism {
  background-color: var(--sp-color-bg);
  background-image: linear-gradient(135deg, var(--sp-color-brand-soft) 0%, transparent 58%), linear-gradient(300deg, var(--sp-color-info-soft) 0%, transparent 54%), repeating-linear-gradient(115deg, transparent 0 28px, color-mix(in srgb, var(--sp-color-border-strong) 38%, transparent) 28px 30px, transparent 30px 56px);
}

.sp-bg-topo {
  background-color: var(--sp-color-bg);
  background-image: repeating-radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--sp-color-brand-soft) 58%, transparent) 0 2px, transparent 2px 20px), repeating-radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--sp-color-info-soft) 54%, transparent) 0 2px, transparent 2px 24px), linear-gradient(180deg, transparent 0%, color-mix(in srgb, black 18%, transparent) 100%);
}

/* -----------------------------------------------------------------------------
 * 3.1 Button — <c-button>
 *
 * .sp-button                     base
 * .sp-button--{variant}          primary | secondary | ghost | danger
 * .sp-button--{size}             sm | lg
 * --------------------------------------------------------------------------- */
.sp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-gap-sm);
  padding: var(--sp-control-pad);
  font-family: inherit;
  font-size: var(--sp-text-small);
  font-weight: var(--sp-weight-semibold);
  line-height: var(--sp-line-tight);
  border: 1px solid transparent;
  border-radius: var(--sp-radius-component);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--sp-transition), border-color var(--sp-transition), color var(--sp-transition);
}

.sp-button[disabled],
.sp-button[aria-disabled=true] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.sp-button--primary {
  background-color: var(--sp-color-brand);
  color: var(--sp-color-brand-fg);
}

.sp-button--primary:hover {
  background-color: color-mix(in srgb, var(--sp-color-brand), black var(--sp-hover-darken));
}

.sp-button--secondary {
  background-color: var(--sp-color-surface);
  color: var(--sp-color-text);
  border-color: var(--sp-color-border-strong);
}

.sp-button--secondary:hover {
  background-color: color-mix(in srgb, var(--sp-color-surface), black var(--sp-hover-darken));
  border-color: color-mix(in srgb, var(--sp-color-border-strong), black var(--sp-hover-darken));
}

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

.sp-button--ghost:hover {
  background-color: color-mix(in srgb, var(--sp-color-surface-muted), black var(--sp-hover-darken));
}

.sp-button--danger {
  background-color: var(--sp-color-danger);
  color: var(--sp-color-brand-fg);
}

.sp-button--danger:hover {
  background-color: color-mix(in srgb, var(--sp-color-danger), black var(--sp-hover-darken));
}

.sp-button--sm {
  padding: var(--sp-space-1) var(--sp-inset-sm);
  font-size: var(--sp-text-small);
}

.sp-button--lg {
  padding: var(--sp-inset-sm) var(--sp-inset-lg);
  font-size: var(--sp-text-body);
}

/* -----------------------------------------------------------------------------
 * 3.2 Card — <c-card>
 * --------------------------------------------------------------------------- */
.sp-card {
  background-color: var(--sp-color-surface);
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-component);
  box-shadow: var(--sp-shadow-sm);
  overflow: hidden;
}

.sp-card__header,
.sp-card__footer {
  display: flex;
  align-items: center;
  gap: var(--sp-gap-sm);
  padding: var(--sp-pad-block) var(--sp-pad-inline);
  color: var(--sp-color-text);
  background-color: var(--sp-color-surface-muted);
}

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

.sp-card__footer {
  border-top: 1px solid var(--sp-color-border);
  justify-content: flex-end;
}

.sp-card__body {
  padding: var(--sp-inset-lg);
}

.sp-card--tabs .sp-card__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-gap);
  padding: var(--sp-gap-sm) var(--sp-pad-inline);
  background-color: var(--sp-color-surface-muted);
  border-bottom: 1px solid var(--sp-color-border);
}

.sp-card__tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-space-1);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.sp-card__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-gap-sm);
  flex-shrink: 0;
}

.sp-card--tabs .sp-card__body {
  padding: var(--sp-inset-lg);
}

.sp-card--tabs .sp-tabs__panel {
  padding: 0;
  margin: 0;
}

/* -----------------------------------------------------------------------------
 * 3.3 Field (input) — <c-input>
 * --------------------------------------------------------------------------- */
.sp-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gap-sm);
}

.sp-field__label {
  display: inline-flex;
  align-items: baseline;
}

.sp-field__required {
  color: var(--sp-color-danger);
  margin-left: var(--sp-space-1);
}

.sp-field__input {
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-base);
  color: var(--sp-color-text);
  padding: 0 var(--sp-space-3);
  height: var(--sp-control-min-height);
  min-height: var(--sp-control-min-height);
  background-color: var(--sp-color-surface);
  border: 1px solid var(--sp-color-border-strong);
  border-radius: var(--sp-radius-component);
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-field__input::placeholder {
  color: var(--sp-color-text-subtle);
}

.sp-field__input:hover {
  border-color: var(--sp-color-text-subtle);
}

.sp-field__input:disabled {
  background-color: var(--sp-color-surface-muted);
  background-image: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--sp-color-border-strong) 38%, transparent) 5px 6px);
  cursor: not-allowed;
}

.sp-field__input:disabled:hover {
  border-color: var(--sp-color-border-strong);
}

.sp-field__help,
.sp-field__error {
  margin: 0;
}

.sp-field--invalid .sp-field__input {
  border-color: var(--sp-color-danger);
  background: linear-gradient(90deg, var(--sp-color-danger-soft) 0%, transparent 55%), var(--sp-color-surface);
}
.sp-field--invalid .sp-field__input:focus-visible {
  box-shadow: 0 0 0 3px var(--sp-color-danger-soft);
}

/* -----------------------------------------------------------------------------
 * 3.4 Tag input — <c-tag-input>
 * --------------------------------------------------------------------------- */
.sp-tag-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-gap-sm);
  box-sizing: border-box;
  padding: var(--sp-space-1) var(--sp-space-3);
  min-height: var(--sp-control-min-height);
  background-color: var(--sp-color-surface);
  border: 1px solid var(--sp-color-border-strong);
  border-radius: var(--sp-radius-component);
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
  cursor: text;
}

.sp-tag-input:hover {
  border-color: var(--sp-color-text-subtle);
}

.sp-tag-input--disabled {
  background-color: var(--sp-color-surface-muted);
  background-image: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--sp-color-border-strong) 38%, transparent) 5px 6px);
  cursor: not-allowed;
}

.sp-tag-input__tags {
  display: contents;
}

.sp-tag-input__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-1);
  max-width: 100%;
  padding: var(--sp-space-1) var(--sp-gap-sm);
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-tight);
  color: var(--sp-color-text);
  background-color: var(--sp-color-surface-muted);
  border-radius: var(--sp-radius-component);
}

.sp-tag-input__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-tag-input__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  border-radius: var(--sp-radius-sm);
  background: transparent;
  color: var(--sp-color-text-muted);
  font-size: var(--sp-text-body);
  line-height: 1;
  cursor: pointer;
  transition: color var(--sp-transition), background-color var(--sp-transition);
}

.sp-tag-input__remove:hover {
  color: var(--sp-color-text);
  background-color: var(--sp-color-overlay);
}

.sp-tag-input__input {
  flex: 1 1 8ch;
  min-width: 8ch;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--sp-color-text);
  font-family: inherit;
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-base);
}

.sp-tag-input__input::placeholder {
  color: var(--sp-color-text-subtle);
}

.sp-tag-input__input:focus {
  outline: none;
}

.sp-tag-input__input:disabled {
  cursor: not-allowed;
}

.sp-field--invalid .sp-tag-input {
  border-color: var(--sp-color-danger);
  background: linear-gradient(90deg, var(--sp-color-danger-soft) 0%, transparent 55%), var(--sp-color-surface);
}
.sp-field--invalid .sp-tag-input:focus-within {
  box-shadow: 0 0 0 3px var(--sp-color-danger-soft);
}

/* -----------------------------------------------------------------------------
 * 3.5 Badge — <c-badge>
 *
 * .sp-badge                base (neutral)
 * .sp-badge--{variant}     success | warning | danger | info | brand
 * --------------------------------------------------------------------------- */
.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-1);
  padding: var(--sp-space-1) var(--sp-gap-sm);
  font-size: var(--sp-text-small);
  font-weight: var(--sp-weight-regular);
  line-height: var(--sp-line-tight);
  color: var(--sp-color-text);
  background-color: var(--sp-color-surface-muted);
  border-radius: var(--sp-radius-component);
  white-space: nowrap;
}

.sp-badge--brand {
  color: var(--sp-color-brand-fg);
  background-color: var(--sp-color-brand);
}

.sp-badge--success {
  color: var(--sp-color-brand-fg);
  background-color: var(--sp-color-success);
}

.sp-badge--warning {
  color: var(--sp-color-brand-fg);
  background-color: var(--sp-color-warning);
}

.sp-badge--danger {
  color: var(--sp-color-brand-fg);
  background-color: var(--sp-color-danger);
}

.sp-badge--info {
  color: var(--sp-color-brand-fg);
  background-color: var(--sp-color-info);
}

/* -----------------------------------------------------------------------------
 * 3.6 Alert — <c-alert>
 *
 * .sp-alert                base (info-tinted by default)
 * .sp-alert--{variant}     success | warning | danger | info
 * --------------------------------------------------------------------------- */
.sp-alert {
  display: flex;
  gap: var(--sp-gap);
  align-items: flex-start;
  padding: var(--sp-inset-md) var(--sp-pad-inline);
  border: 1px solid var(--sp-color-border);
  border-left-width: 4px;
  border-radius: var(--sp-radius-component);
  color: var(--sp-color-text);
  background: linear-gradient(90deg, var(--sp-color-info-soft) 0%, transparent 55%), var(--sp-color-surface);
}

.sp-alert__body {
  flex: 1;
}

.sp-alert__title {
  margin-bottom: var(--sp-space-1);
}

.sp-alert__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--sp-text-medium);
  line-height: 1;
  color: var(--sp-color-text-subtle);
  padding: 0;
  border-radius: var(--sp-radius-component);
}

.sp-alert__close:hover {
  color: var(--sp-color-text);
}

.sp-alert--info {
  border-color: color-mix(in srgb, var(--sp-color-info) 28%, var(--sp-color-border));
  border-left-color: var(--sp-color-info);
  background: linear-gradient(90deg, var(--sp-color-info-soft) 0%, transparent 55%), var(--sp-color-surface);
}

.sp-alert--success {
  border-color: color-mix(in srgb, var(--sp-color-success) 28%, var(--sp-color-border));
  border-left-color: var(--sp-color-success);
  background: linear-gradient(90deg, var(--sp-color-success-soft) 0%, transparent 55%), var(--sp-color-surface);
}

.sp-alert--warning {
  border-color: color-mix(in srgb, var(--sp-color-warning) 28%, var(--sp-color-border));
  border-left-color: var(--sp-color-warning);
  background: linear-gradient(90deg, var(--sp-color-warning-soft) 0%, transparent 55%), var(--sp-color-surface);
}

.sp-alert--danger {
  border-color: color-mix(in srgb, var(--sp-color-danger) 28%, var(--sp-color-border));
  border-left-color: var(--sp-color-danger);
  background: linear-gradient(90deg, var(--sp-color-danger-soft) 0%, transparent 55%), var(--sp-color-surface);
}

/* -----------------------------------------------------------------------------
 * 3.7 Dropdown — <c-dropdown>
 *
 * Uses native <details>/<summary> for accessibility and zero-JS toggling.
 * .sp-dropdown__item classes style actions inside the menu.
 * --------------------------------------------------------------------------- */
.sp-dropdown {
  position: relative;
  display: inline-block;
}

.sp-dropdown__trigger {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-gap-sm);
  min-width: 160px;
  box-sizing: border-box;
  height: var(--sp-control-min-height);
  min-height: var(--sp-control-min-height);
  justify-content: space-between;
  padding: 0 var(--sp-space-3);
  background-color: var(--sp-color-surface);
  color: var(--sp-color-text);
  border: 1px solid var(--sp-color-border-strong);
  border-radius: var(--sp-radius-component);
  font-size: var(--sp-text-small);
  font-weight: var(--sp-weight-medium);
  line-height: var(--sp-line-tight);
  cursor: pointer;
  transition: background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-dropdown__trigger::-webkit-details-marker {
  display: none;
}

.sp-dropdown__trigger::marker {
  content: "";
}

.sp-dropdown__trigger:hover {
  background-color: var(--sp-color-surface-muted);
  border-color: var(--sp-color-text-subtle);
}

.sp-dropdown__chevron {
  color: var(--sp-color-text-muted);
  font-size: var(--sp-text-small);
  transition: transform var(--sp-transition);
}

.sp-dropdown[open] .sp-dropdown__chevron {
  transform: rotate(180deg);
}

.sp-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--sp-gap-sm));
  left: 0;
  z-index: 20;
  width: max-content;
  min-width: max(100%, 220px);
  max-width: min(320px, 100vw - 2rem);
  max-height: 280px;
  overflow: auto;
  padding: var(--sp-gap-sm);
  background-color: var(--sp-color-surface);
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-component);
  box-shadow: var(--sp-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-1);
  transform-origin: top;
  animation: sp-dropdown-in 140ms ease;
}

.sp-dropdown--end .sp-dropdown__menu {
  left: auto;
  right: 0;
}

.sp-dropdown__item {
  display: block;
  width: 100%;
  padding: var(--sp-control-pad);
  border-radius: var(--sp-radius-component);
  text-decoration: none;
  color: var(--sp-color-text);
  font-size: var(--sp-text-small);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sp-dropdown__item:hover,
.sp-dropdown__item:focus-visible {
  background-color: var(--sp-color-surface-muted);
  outline: none;
}

.sp-dropdown__item--danger {
  color: var(--sp-color-danger);
}

@keyframes sp-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* -----------------------------------------------------------------------------
 * 3.8 Autocomplete — <c-autocomplete>
 * --------------------------------------------------------------------------- */
.sp-autocomplete {
  position: relative;
  width: 100%;
}

.sp-autocomplete--disabled .sp-autocomplete__input {
  background-color: var(--sp-color-surface-muted);
  background-image: repeating-linear-gradient(-45deg, transparent 0 5px, color-mix(in srgb, var(--sp-color-border-strong) 38%, transparent) 5px 6px);
  cursor: not-allowed;
}

.sp-autocomplete--disabled .sp-autocomplete__icon {
  opacity: 0.55;
}

.sp-autocomplete__input {
  width: 100%;
  padding-right: calc(var(--sp-inset-lg) + var(--sp-space-1));
}

.sp-autocomplete__icon {
  position: absolute;
  top: 50%;
  right: var(--sp-inset-sm);
  transform: translateY(-50%);
  color: var(--sp-color-text-subtle);
  pointer-events: none;
  font-size: var(--sp-text-small);
}

.sp-autocomplete__menu {
  position: absolute;
  top: calc(100% + var(--sp-gap-sm));
  left: 0;
  z-index: 20;
  width: 100%;
  max-height: 240px;
  overflow: auto;
  padding: var(--sp-space-1);
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-component);
  background-color: var(--sp-color-surface);
  box-shadow: var(--sp-shadow-lg);
  animation: sp-dropdown-in 120ms ease;
}

.sp-autocomplete__option {
  display: block;
  width: 100%;
  padding: var(--sp-control-pad);
  border: 0;
  border-radius: var(--sp-radius-component);
  background: transparent;
  color: var(--sp-color-text);
  font-size: var(--sp-text-small);
  text-align: left;
  cursor: pointer;
}

.sp-autocomplete__option-main {
  display: flex;
  align-items: center;
  gap: var(--sp-gap-sm);
  min-width: 0;
}

.sp-autocomplete__option-avatar {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--sp-radius-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--sp-color-border);
}

.sp-autocomplete__option-avatar--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sp-color-surface-muted);
  color: var(--sp-color-text-muted);
  font-size: calc(var(--sp-text-small) * 0.92);
  font-weight: var(--sp-weight-semibold);
  line-height: 1;
}

.sp-autocomplete__option-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.sp-autocomplete__option-title {
  display: block;
  color: var(--sp-color-text);
  line-height: var(--sp-line-tight);
}

.sp-autocomplete__option-subtitle {
  display: block;
  color: var(--sp-color-text-muted);
  font-size: calc(var(--sp-text-small) * 0.92);
  line-height: var(--sp-line-tight);
}

.sp-autocomplete__match {
  background: transparent;
  color: var(--sp-color-brand);
  font-weight: var(--sp-weight-semibold);
}

.sp-autocomplete__option:hover,
.sp-autocomplete__option:focus-visible,
.sp-autocomplete__option.is-active {
  background-color: var(--sp-color-surface-muted);
  outline: none;
}

.sp-autocomplete__empty {
  padding: var(--sp-control-pad);
  color: var(--sp-color-text-muted);
  font-size: var(--sp-text-small);
}

/* -----------------------------------------------------------------------------
 * 3.9 Checkbox — <c-checkbox>
 * --------------------------------------------------------------------------- */
.sp-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-gap-sm);
  cursor: pointer;
  user-select: none;
}

.sp-checkbox__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.sp-checkbox__box {
  width: 16px;
  height: 16px;
  border: 1px solid var(--sp-color-border-strong);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition);
}
.sp-checkbox__box::after {
  content: "";
  width: 8px;
  height: 8px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--sp-transition), transform var(--sp-transition);
  background: var(--sp-color-brand-fg);
  clip-path: polygon(14% 44%, 0 59%, 42% 100%, 100% 20%, 84% 5%, 40% 67%);
}

.sp-checkbox__input:checked + .sp-checkbox__box {
  background: var(--sp-color-brand);
  border-color: var(--sp-color-brand);
  box-shadow: 0 0 0 2px var(--sp-color-brand-soft);
}
.sp-checkbox__input:checked + .sp-checkbox__box::after {
  opacity: 1;
  transform: scale(1);
}

.sp-checkbox__input:disabled + .sp-checkbox__box {
  opacity: 0.5;
}

/* -----------------------------------------------------------------------------
 * 3.10 Data Grid — <c-data-grid>
 * --------------------------------------------------------------------------- */
.sp-data-grid {
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-component);
  background-color: var(--sp-color-surface);
  overflow: hidden;
}

.sp-data-grid__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-gap);
  padding: var(--sp-pad-block) var(--sp-pad-inline);
  border-bottom: 1px solid var(--sp-color-border);
  background: var(--sp-color-surface-muted);
}

.sp-data-grid__toolbar-left {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-gap);
  min-width: 0;
  flex: 1;
}

.sp-data-grid__caption-inline {
  font-size: var(--sp-text-body);
  color: var(--sp-color-text-muted);
  font-weight: var(--sp-weight-medium);
  white-space: nowrap;
}

.sp-data-grid__search {
  width: min(560px, 100%);
}

.sp-data-grid__toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-gap-sm);
  justify-content: flex-end;
  flex-wrap: wrap;
}

.sp-data-grid__footer {
  padding: var(--sp-space-2) var(--sp-pad-inline);
  border-top: 1px solid var(--sp-color-border);
  background: color-mix(in srgb, var(--sp-color-surface) 92%, var(--sp-color-surface-muted) 8%);
}

.sp-data-grid--compact .sp-data-grid__footer {
  padding: var(--sp-space-2) var(--sp-inset-md);
}

.sp-data-grid__scroll {
  overflow: auto;
}

.sp-data-grid__table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--sp-text-body);
  line-height: var(--sp-line-base);
}

.sp-data-grid__caption {
  text-align: left;
  padding: var(--sp-pad-block) var(--sp-pad-inline);
  color: var(--sp-color-text-muted);
  font-size: var(--sp-text-body);
  font-weight: var(--sp-weight-medium);
  border-bottom: 1px solid var(--sp-color-border);
}

.sp-data-grid__table thead th {
  padding: var(--sp-pad-block) var(--sp-pad-inline);
  text-align: left;
  font-size: var(--sp-text-body);
  font-weight: var(--sp-weight-medium);
  color: var(--sp-color-text-muted);
  background-color: var(--sp-color-surface-muted);
  border-bottom: 1px solid var(--sp-color-border);
  white-space: nowrap;
}

.sp-data-grid__table tbody td {
  padding: var(--sp-pad-block) var(--sp-pad-inline);
  text-align: left;
  color: var(--sp-color-text);
  border-bottom: 1px solid var(--sp-color-border);
  white-space: nowrap;
}

.sp-data-grid--align-right .sp-data-grid__table thead th,
.sp-data-grid--align-right .sp-data-grid__table tbody td {
  text-align: right;
}

.sp-data-grid--align-right .sp-data-grid__table thead th.sp-data-grid__checkbox-cell,
.sp-data-grid--align-right .sp-data-grid__table tbody td.sp-data-grid__checkbox-cell {
  text-align: left;
}

.sp-data-grid--compact .sp-data-grid__toolbar {
  padding: var(--sp-space-2) var(--sp-inset-md);
}

.sp-data-grid--compact .sp-data-grid__caption-inline {
  font-size: var(--sp-text-small);
}

.sp-data-grid--compact .sp-data-grid__table thead th,
.sp-data-grid--compact .sp-data-grid__table tbody td {
  padding: var(--sp-space-2) var(--sp-inset-md);
  font-size: var(--sp-text-small);
}

.sp-data-grid__table tbody tr {
  position: relative;
}

.sp-data-grid__table tbody tr:hover:not(.is-selected) td {
  background-color: var(--sp-color-surface-muted);
}

.sp-data-grid__table tbody tr.is-selected {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sp-color-brand-soft) 45%, transparent) 0%, transparent 42%), var(--sp-color-surface);
}

.sp-data-grid__table tbody tr.is-selected:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sp-color-brand-soft) 55%, transparent) 0%, transparent 42%), var(--sp-color-surface-muted);
}

.sp-data-grid__table tbody tr.is-selected td {
  background-color: transparent;
}

.sp-data-grid__table tbody tr:last-child td {
  border-bottom: 0;
}

.sp-data-grid__cell--media {
  white-space: normal;
}

.sp-data-grid__media {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-2);
  min-width: 0;
}

a.sp-data-grid__media-link {
  text-decoration: none;
  color: inherit;
}

a.sp-data-grid__media-link:hover .sp-data-grid__media-title,
a.sp-data-grid__media-link:focus-visible .sp-data-grid__media-title {
  color: var(--sp-color-brand);
}

.sp-data-grid__thumb {
  width: 4rem;
  height: 2.25rem;
  border-radius: var(--sp-radius-sm);
  object-fit: cover;
  border: 1px solid var(--sp-color-border-strong);
  box-shadow: var(--sp-shadow-sm);
  flex-shrink: 0;
  transition: opacity var(--sp-transition), transform var(--sp-transition);
}

.sp-data-grid__media-lines {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sp-data-grid__media-title {
  color: var(--sp-color-text);
  font-weight: var(--sp-weight-medium);
  line-height: var(--sp-line-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-data-grid__media-subtitle {
  color: var(--sp-color-text-muted);
  font-size: calc(var(--sp-text-small) * 0.92);
  line-height: var(--sp-line-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-data-grid__cell--muted {
  color: var(--sp-color-text-muted) !important;
}

.sp-data-grid__cell--right {
  text-align: right;
}

.sp-data-grid__table thead th.sp-data-grid__checkbox-cell,
.sp-data-grid__table tbody td.sp-data-grid__checkbox-cell {
  width: 34px;
  padding-left: var(--sp-space-2);
  padding-right: var(--sp-space-2);
  text-align: left;
}

.sp-data-grid__checkbox-cell .sp-checkbox {
  justify-content: flex-start;
}

.sp-data-grid__row-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-gap-sm);
  opacity: 0;
  position: absolute;
  right: var(--sp-gap-sm);
  top: 50%;
  z-index: 2;
  padding-left: var(--sp-space-6);
  transform: translate(6px, -50%);
  transition: opacity var(--sp-transition), transform var(--sp-transition);
}

.sp-data-grid__row-actions::before {
  content: "";
  position: absolute;
  left: 0;
  right: -8px;
  top: -8px;
  bottom: -8px;
  z-index: -1;
  border-radius: var(--sp-radius-component);
  background: linear-gradient(to left, var(--sp-color-surface) 40%, transparent);
  pointer-events: none;
}

.sp-data-grid__table tbody tr:hover .sp-data-grid__row-actions,
.sp-data-grid__table tbody tr:focus-within .sp-data-grid__row-actions {
  opacity: 1;
  transform: translate(0, -50%);
}

@media (hover: none) {
  .sp-data-grid__row-actions {
    opacity: 1;
    transform: none;
    position: static;
    padding-left: 0;
  }
  .sp-data-grid__row-actions::before {
    display: none;
  }
}
/* -----------------------------------------------------------------------------
 * 3.11 Pagination — <c-pagination>
 * --------------------------------------------------------------------------- */
.sp-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-gap-sm);
  flex-wrap: wrap;
}

.sp-pagination__meta {
  color: var(--sp-color-text-muted);
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-tight);
}

.sp-pagination__list {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

.sp-pagination__link,
.sp-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--sp-space-2);
  border-radius: var(--sp-radius-component);
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-tight);
}

.sp-pagination__link {
  border: 1px solid var(--sp-color-border-strong);
  background: var(--sp-color-surface);
  color: var(--sp-color-text);
  text-decoration: none;
  transition: border-color var(--sp-transition), background-color var(--sp-transition), color var(--sp-transition);
}

.sp-pagination__link:hover,
.sp-pagination__link:focus-visible {
  border-color: var(--sp-color-text-subtle);
  background: var(--sp-color-surface-muted);
  outline: none;
}

.sp-pagination__link--control {
  min-width: 4.5rem;
}

.sp-pagination__link.is-current {
  border-color: color-mix(in srgb, var(--sp-color-brand) 40%, var(--sp-color-border-strong));
  background: color-mix(in srgb, var(--sp-color-brand-soft) 45%, transparent);
  color: var(--sp-color-brand);
  font-weight: var(--sp-weight-semibold);
}

.sp-pagination__link.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sp-pagination__ellipsis {
  color: var(--sp-color-text-subtle);
}

/* -----------------------------------------------------------------------------
 * 3.12 Tabs — <c-tabs>
 * --------------------------------------------------------------------------- */
.sp-tabs {
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-component);
  background: var(--sp-color-surface);
  overflow: hidden;
}

.sp-tabs--plain {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.sp-tabs__list {
  display: flex;
  align-items: center;
  gap: var(--sp-space-1);
  padding: var(--sp-gap-sm);
  border-bottom: 1px solid var(--sp-color-border);
  background: var(--sp-color-surface-muted);
  overflow-x: auto;
}

.sp-tabs__tab {
  border: 1px solid transparent;
  border-radius: var(--sp-radius-component);
  background: transparent;
  color: var(--sp-color-text-muted);
  font-size: var(--sp-text-small);
  font-weight: var(--sp-weight-medium);
  line-height: var(--sp-line-tight);
  padding: var(--sp-control-pad);
  cursor: pointer;
  transition: background-color var(--sp-transition), color var(--sp-transition), border-color var(--sp-transition);
  white-space: nowrap;
}

.sp-tabs__tab:hover {
  background: var(--sp-color-overlay-soft);
  color: var(--sp-color-text);
}

.sp-tabs__tab[aria-selected=true] {
  background: var(--sp-color-surface);
  color: var(--sp-color-brand);
  border-color: color-mix(in srgb, var(--sp-color-brand) 35%, transparent);
}

.sp-tabs__panel {
  padding: var(--sp-inset-lg);
}

.sp-tabs__panel[hidden] {
  display: none;
}

.sp-tabs--plain .sp-tabs__list {
  padding: 0;
  background: transparent;
}

.sp-tabs--plain .sp-tabs__tab {
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: var(--sp-space-2) var(--sp-space-3);
}

.sp-tabs--plain .sp-tabs__tab:hover {
  background: transparent;
}

.sp-tabs--plain .sp-tabs__tab[aria-selected=true] {
  background: transparent;
  border-color: var(--sp-color-brand);
}

.sp-tabs--plain .sp-tabs__panel {
  padding: var(--sp-inset-md) 0 0;
}

/* -----------------------------------------------------------------------------
 * 3.13 Accordion — <c-accordion>
 *
 * Native <details>/<summary> — no JS.
 * --------------------------------------------------------------------------- */
.sp-accordion {
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-component);
  background: var(--sp-color-surface);
  overflow: hidden;
}

.sp-accordion__item {
  border-bottom: 1px solid var(--sp-color-border);
}

.sp-accordion__item:last-child {
  border-bottom: 0;
}

.sp-accordion__trigger {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-gap);
  padding: var(--sp-pad-block) var(--sp-pad-inline);
  cursor: pointer;
  color: var(--sp-color-text);
  transition: background var(--sp-transition);
  background: linear-gradient(90deg, var(--sp-color-surface-muted) 0%, transparent 50%), var(--sp-color-surface);
}

.sp-accordion__trigger::-webkit-details-marker {
  display: none;
}

.sp-accordion__trigger::marker {
  content: "";
}

.sp-accordion__trigger::after {
  content: "▾";
  color: var(--sp-color-text-subtle);
  font-size: var(--sp-text-small);
  line-height: 1;
  transition: transform var(--sp-transition);
}

.sp-accordion__trigger:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sp-color-surface-muted) 85%, var(--sp-color-text) 15%) 0%, transparent 50%), var(--sp-color-surface);
}

.sp-accordion__item[open] > .sp-accordion__trigger {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sp-color-surface-muted) 75%, transparent) 0%, transparent 55%), var(--sp-color-surface);
}

.sp-accordion__item[open] > .sp-accordion__trigger::after {
  transform: rotate(180deg);
}

.sp-accordion__panel {
  padding: 0 var(--sp-pad-inline) var(--sp-pad-block);
}

/* -----------------------------------------------------------------------------
 * 3.14 Tree select — <c-tree-select>
 * --------------------------------------------------------------------------- */
.sp-tree-select {
  border: 1px solid var(--sp-color-border-strong);
  border-radius: var(--sp-radius-component);
  background: var(--sp-color-surface);
}

.sp-tree-select__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-gap-sm);
  padding: var(--sp-space-2) var(--sp-inset-md);
  border-bottom: 1px solid var(--sp-color-border);
  background: var(--sp-color-surface-muted);
}

.sp-tree-select__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-space-1);
}

.sp-tree-select__action {
  border: 1px solid var(--sp-color-border-strong);
  border-radius: var(--sp-radius-component);
  background: var(--sp-color-surface);
  color: var(--sp-color-text);
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-tight);
  padding: var(--sp-space-1) var(--sp-space-2);
  cursor: pointer;
  transition: background-color var(--sp-transition), border-color var(--sp-transition);
}

.sp-tree-select__action:hover {
  background: var(--sp-color-surface-muted);
  border-color: var(--sp-color-text-subtle);
}

.sp-tree-select__panel {
  max-height: 280px;
  overflow: auto;
  padding: var(--sp-inset-sm) var(--sp-inset-md);
}

.sp-tree-select__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-1);
}

.sp-tree-select__list--nested {
  margin-top: var(--sp-space-1);
  margin-left: var(--sp-space-4);
  padding-left: var(--sp-space-3);
  border-left: 1px solid var(--sp-color-border);
}

.sp-tree-select__option {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  min-width: 0;
  padding: var(--sp-space-1) var(--sp-space-2);
  border-radius: var(--sp-radius-component);
  color: var(--sp-color-text);
  cursor: pointer;
  transition: background-color var(--sp-transition);
}

.sp-tree-select__option:hover {
  background: var(--sp-color-surface-muted);
}

.sp-tree-select__checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.sp-tree-select__box {
  width: 16px;
  height: 16px;
  border: 1px solid var(--sp-color-border-strong);
  border-radius: var(--sp-radius-sm);
  background: var(--sp-color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--sp-transition), border-color var(--sp-transition), box-shadow var(--sp-transition);
}
.sp-tree-select__box::after {
  content: "";
  width: 8px;
  height: 8px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--sp-transition), transform var(--sp-transition);
  background: var(--sp-color-brand-fg);
  clip-path: polygon(14% 44%, 0 59%, 42% 100%, 100% 20%, 84% 5%, 40% 67%);
}

.sp-tree-select__checkbox:checked + .sp-tree-select__box {
  background: var(--sp-color-brand);
  border-color: var(--sp-color-brand);
  box-shadow: 0 0 0 2px var(--sp-color-brand-soft);
}
.sp-tree-select__checkbox:checked + .sp-tree-select__box::after {
  opacity: 1;
  transform: scale(1);
}

.sp-tree-select__text {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-space-2);
  min-width: 0;
}

.sp-tree-select__label {
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-tight);
}

.sp-tree-select__meta {
  color: var(--sp-color-text-muted);
  font-size: calc(var(--sp-text-small) * 0.92);
  line-height: var(--sp-line-tight);
}

.sp-field--invalid .sp-tree-select {
  border-color: var(--sp-color-danger);
  background: linear-gradient(90deg, var(--sp-color-danger-soft) 0%, transparent 55%), var(--sp-color-surface);
}
.sp-field--invalid .sp-tree-select:focus-within {
  box-shadow: 0 0 0 3px var(--sp-color-danger-soft);
}

/* -----------------------------------------------------------------------------
 * 3.15 Modal — <c-modal>
 *
 * Native <dialog> with ::backdrop. Open via [data-sp-modal-open="id"].
 * --------------------------------------------------------------------------- */
.sp-modal {
  border: 0;
  padding: var(--sp-inset-md);
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background: transparent;
  color: var(--sp-color-text);
  overflow: visible;
}

.sp-modal:not([open]) {
  display: none;
}

.sp-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-modal::backdrop {
  background: var(--sp-color-backdrop);
  backdrop-filter: blur(2px);
}

.sp-modal[open] .sp-modal__panel {
  animation: sp-modal-in 180ms ease;
}

.sp-modal[open]::backdrop {
  animation: sp-modal-backdrop-in 180ms ease;
}

.sp-modal__panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 520px);
  max-height: min(100vh - 2rem, 720px);
  background-color: var(--sp-color-surface);
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-lg);
  overflow: hidden;
}

.sp-modal--sm .sp-modal__panel {
  width: min(100%, 400px);
}

.sp-modal--lg .sp-modal__panel {
  width: min(100%, 720px);
}

.sp-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-gap);
  padding: var(--sp-pad-block) var(--sp-pad-inline);
  border-bottom: 1px solid var(--sp-color-border);
  background-color: var(--sp-color-surface-muted);
}

.sp-modal__close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--sp-text-large);
  line-height: 1;
  color: var(--sp-color-text-subtle);
  padding: var(--sp-space-1);
  border-radius: var(--sp-radius-component);
  transition: color var(--sp-transition), background-color var(--sp-transition);
}

.sp-modal__close:hover {
  color: var(--sp-color-text);
  background-color: color-mix(in srgb, var(--sp-color-surface), black var(--sp-hover-darken));
}

.sp-modal__body {
  padding: var(--sp-inset-lg);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.sp-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-gap-sm);
  padding: var(--sp-pad-block) var(--sp-pad-inline);
  border-top: 1px solid var(--sp-color-border);
  background-color: var(--sp-color-surface-muted);
}

@keyframes sp-modal-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes sp-modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* -----------------------------------------------------------------------------
 * 3.16 Paper — <c-paper>
 *
 * Decorative surface for page sections. Each `.sp-paper--{bg}` variant stacks
 * a CSS-generated abstract pattern on top of --sp-color-surface so the inner
 * content stays legible. No image assets are loaded — every pattern is built
 * from gradients and reads existing theme tokens, so palette changes flow
 * through automatically.
 *
 * .sp-paper                base
 * .sp-paper--{bg}          plain | glow | aurora | grid | dots | stripes |
 *                          prism | topo | brand | asphalt | tracks
 * .sp-paper--{size}        sm | lg   (default: md)
 * .sp-paper--bordered      Adds a 1px hairline border
 * --------------------------------------------------------------------------- */
.sp-paper {
  position: relative;
  padding: var(--sp-inset-lg);
  border-radius: var(--sp-radius-component);
  background-color: var(--sp-color-surface);
  color: var(--sp-color-text);
  overflow: hidden;
  isolation: isolate;
}

.sp-paper--sm {
  padding: var(--sp-inset-md);
}

.sp-paper--lg {
  padding: var(--sp-space-6);
}

.sp-paper--bordered {
  border: 1px solid var(--sp-color-border);
}

.sp-paper--glow {
  background-image: radial-gradient(ellipse 80% 60% at 100% 0%, var(--sp-color-brand-soft) 0%, transparent 60%);
}

.sp-paper--aurora,
.sp-listing-big--aurora .sp-listing-big__main {
  background-image: radial-gradient(ellipse 70% 55% at 0% 0%, var(--sp-color-brand-soft) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 100% 100%, var(--sp-color-info-soft) 0%, transparent 55%), radial-gradient(ellipse 55% 40% at 50% 80%, var(--sp-color-warning-soft) 0%, transparent 60%);
}

.sp-paper--grid {
  background-image: linear-gradient(var(--sp-color-border) 1px, transparent 1px), linear-gradient(90deg, var(--sp-color-border) 1px, transparent 1px);
  background-size: 32px 32px;
}

.sp-paper--dots,
.sp-listing--dots .sp-listing__body {
  background-image: radial-gradient(circle at 1px 1px, var(--sp-color-border-strong) 1px, transparent 0);
  background-size: 20px 20px;
}

.sp-paper--stripes {
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, var(--sp-color-overlay-soft) 14px 15px);
}

.sp-paper--prism {
  background-image: linear-gradient(135deg, var(--sp-color-brand-soft) 0%, transparent 58%), linear-gradient(300deg, var(--sp-color-info-soft) 0%, transparent 54%), repeating-linear-gradient(115deg, transparent 0 28px, color-mix(in srgb, var(--sp-color-border-strong) 38%, transparent) 28px 30px, transparent 30px 56px);
}

.sp-paper--topo {
  background-image: repeating-radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--sp-color-brand-soft) 58%, transparent) 0 2px, transparent 2px 20px), repeating-radial-gradient(circle at 82% 70%, color-mix(in srgb, var(--sp-color-info-soft) 54%, transparent) 0 2px, transparent 2px 24px), linear-gradient(180deg, transparent 0%, color-mix(in srgb, black 18%, transparent) 100%);
}

.sp-paper--brand {
  background-color: color-mix(in srgb, var(--sp-color-brand) 8%, var(--sp-color-surface));
  background-image: linear-gradient(135deg, var(--sp-color-brand-soft) 0%, transparent 80%);
}

.sp-paper--asphalt {
  background-color: color-mix(in srgb, var(--sp-color-surface) 84%, var(--sp-color-bg) 16%);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sp-color-border-strong) 56%, transparent) 1px, transparent 0), radial-gradient(circle at 2px 2px, color-mix(in srgb, var(--sp-color-text-subtle) 28%, transparent) 1px, transparent 0), linear-gradient(160deg, color-mix(in srgb, black 26%, transparent) 0%, transparent 62%);
  background-size: 7px 7px, 11px 11px, 100% 100%;
}

.sp-paper--tracks {
  background-color: color-mix(in srgb, var(--sp-color-surface) 90%, var(--sp-color-bg) 10%);
  background-image: repeating-linear-gradient(118deg, transparent 0 22px, color-mix(in srgb, var(--sp-color-border-strong) 52%, transparent) 22px 26px, transparent 26px 44px), repeating-linear-gradient(118deg, transparent 0 24px, color-mix(in srgb, var(--sp-color-border) 56%, transparent) 24px 25px, transparent 25px 32px);
  background-size: 180px 180px, 180px 180px;
  background-position: 0 0, 46px 16px;
}

/* -----------------------------------------------------------------------------
 * 3.17 Listing small — <c-listing-small>
 *
 * Compact listing card for grid views (homepage, search results, category
 * browse). Accepts a single image, title, attribute row (+N overflow), and
 * optional badges/price overlays.
 * --------------------------------------------------------------------------- */
.sp-listing,
.sp-listing-small {
  display: block;
  background-color: var(--sp-color-surface);
  border: 2px solid color-mix(in srgb, var(--sp-color-border) 78%, var(--sp-color-border-strong) 22%);
  border-radius: var(--sp-radius-component);
  overflow: hidden;
  box-shadow: var(--sp-shadow-sm);
  color: var(--sp-color-text);
}

.sp-listing__media,
.sp-listing-small__media {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sp-color-surface-muted) 85%, var(--sp-color-border) 15%), var(--sp-color-surface-muted));
}

.sp-listing__media::after,
.sp-listing-small__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, black 8%, transparent) 100%);
  pointer-events: none;
}

.sp-listing__image,
.sp-listing-small__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0, 0, 0, 0.7) 93%, rgba(0, 0, 0, 0.35) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 84%, rgba(0, 0, 0, 0.7) 93%, rgba(0, 0, 0, 0.35) 100%);
}

.sp-listing__overlay-top,
.sp-listing-small__overlay-top {
  position: absolute;
  top: var(--sp-space-2);
  right: var(--sp-space-2);
  z-index: 3;
}

.sp-listing__badges,
.sp-listing-small__badges {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-space-1);
  max-width: 70%;
}

.sp-listing__badges .sp-badge,
.sp-listing-small__badges .sp-badge {
  border: 1px solid color-mix(in srgb, var(--sp-color-border) 55%, transparent);
  backdrop-filter: blur(2px);
  box-shadow: 0 2px 10px color-mix(in srgb, black 28%, transparent);
}

.sp-listing__price-tag,
.sp-listing-small__price-tag {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sp-color-brand);
  font-size: var(--sp-text-small);
  font-weight: var(--sp-weight-bold);
  line-height: var(--sp-line-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-listing__price,
.sp-listing-small__price {
  margin: 0;
}

.sp-listing__body,
.sp-listing-small__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
  padding: var(--sp-inset-md);
  background-color: color-mix(in srgb, var(--sp-color-surface) 92%, black 8%);
}

.sp-listing__head,
.sp-listing-small__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sp-listing__title,
.sp-listing-small__title {
  margin: 0;
  min-width: 0;
  font-size: var(--sp-text-medium);
  font-weight: var(--sp-weight-semibold);
  line-height: var(--sp-line-tight);
  color: var(--sp-color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-listing__attrs,
.sp-listing-small__attrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-listing__attrs li,
.sp-listing-small__attrs li {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sp-color-text-muted);
  font-size: var(--sp-text-small);
  font-weight: var(--sp-weight-regular);
  line-height: var(--sp-line-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sp-listing__attrs-overflow,
.sp-listing-small__attrs-overflow {
  color: var(--sp-color-text-muted) !important;
  font-weight: var(--sp-weight-medium) !important;
}

.sp-listing__link,
.sp-listing-small__link {
  color: inherit;
  text-decoration: none;
}

.sp-listing__link:hover .sp-listing,
.sp-listing-small__link:hover .sp-listing-small {
  border-color: var(--sp-color-border-strong);
  box-shadow: var(--sp-shadow-lg);
}

.sp-listing__link:focus-visible,
.sp-listing-small__link:focus-visible {
  outline: none;
}

.sp-listing__link:focus-visible .sp-listing,
.sp-listing-small__link:focus-visible .sp-listing-small {
  box-shadow: var(--sp-focus-ring), var(--sp-shadow-sm);
}

.sp-listing-tiny {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  padding: var(--sp-space-2);
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-component);
  background: var(--sp-color-surface);
}

.sp-listing-tiny__link {
  color: inherit;
  text-decoration: none;
}

.sp-listing-tiny__image {
  width: 4rem;
  height: 2.25rem;
  border-radius: var(--sp-radius-sm);
  object-fit: cover;
  border: 1px solid var(--sp-color-border-strong);
  flex-shrink: 0;
}

.sp-listing-tiny__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sp-listing-tiny__title {
  margin: 0;
  color: var(--sp-color-text);
  font-size: var(--sp-text-small);
  font-weight: var(--sp-weight-semibold);
  line-height: var(--sp-line-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-listing-tiny__price {
  margin: 0;
  color: var(--sp-color-brand);
  font-size: var(--sp-text-small);
  font-weight: var(--sp-weight-bold);
  line-height: var(--sp-line-tight);
}

.sp-listing-big {
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-lg);
  background: var(--sp-color-surface);
  overflow: hidden;
  box-shadow: var(--sp-shadow-sm);
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}

.sp-listing-big__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.sp-listing-big:hover,
.sp-listing-big__link:hover .sp-listing-big {
  border-color: var(--sp-color-border-strong);
  box-shadow: var(--sp-shadow-lg);
}

.sp-listing-big__link:focus-visible {
  outline: none;
}

.sp-listing-big__link:focus-visible .sp-listing-big {
  box-shadow: var(--sp-focus-ring), var(--sp-shadow-sm);
}

.sp-listing-big__main {
  display: grid;
  grid-template-columns: minmax(230px, 320px) minmax(0, 1fr);
  gap: var(--sp-inset-md);
  padding: var(--sp-inset-md) var(--sp-inset-md) var(--sp-space-3);
  transition: background var(--sp-transition);
}

.sp-listing-big__media-col {
  min-width: 0;
  display: flex;
}

.sp-listing-big__hero {
  position: relative;
  border-radius: var(--sp-radius-component);
  overflow: hidden;
  background: transparent;
  height: 100%;
  width: 100%;
}

.sp-listing-big__overlay-top {
  position: absolute;
  top: var(--sp-space-2);
  left: var(--sp-space-2);
  z-index: 3;
}

.sp-listing-big__badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 72%;
}

.sp-listing-big__badges .sp-badge {
  border: 1px solid color-mix(in srgb, var(--sp-color-border) 55%, transparent);
  backdrop-filter: none;
  box-shadow: 0 2px 10px color-mix(in srgb, black 28%, transparent);
}

.sp-listing-big__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-mask-image: linear-gradient(to right, #000 74%, transparent 100%);
  mask-image: linear-gradient(to right, #000 74%, transparent 100%);
}

.sp-listing-big__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
}

.sp-listing-big:hover .sp-listing-big__main,
.sp-listing-big__link:hover .sp-listing-big__main,
.sp-listing-big__link:focus-visible .sp-listing-big__main {
  background: linear-gradient(to left, color-mix(in srgb, var(--sp-color-brand-soft) 80%, transparent) 0%, transparent 70%);
}

.sp-listing-big__headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-space-2);
}

.sp-listing-big__title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-space-1);
  min-width: 0;
}

.sp-listing-big__title {
  margin: 0;
  color: var(--sp-color-text);
  font-size: var(--sp-text-medium);
  font-weight: var(--sp-weight-semibold);
  line-height: var(--sp-line-tight);
}

.sp-listing-big__price {
  margin: 0;
  color: var(--sp-color-brand);
  font-size: var(--sp-text-medium);
  font-weight: var(--sp-weight-semibold);
  line-height: var(--sp-line-tight);
  white-space: nowrap;
}

.sp-listing-big__desc {
  margin: 0;
  padding: var(--sp-space-1) 0;
  color: var(--sp-color-text-muted);
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-base);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.sp-listing-big__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-space-1);
}

.sp-listing-big__fact {
  padding: var(--sp-space-1) var(--sp-space-2);
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-component);
  background: color-mix(in srgb, var(--sp-color-surface) 92%, var(--sp-color-surface-muted) 8%);
  min-width: 0;
}

.sp-listing-big__fact-label {
  display: block;
  color: var(--sp-color-text-muted);
  font-size: calc(var(--sp-text-small) * 0.82);
  line-height: var(--sp-line-tight);
  margin-bottom: 1px;
}

.sp-listing-big__fact-value {
  display: block;
  color: var(--sp-color-text);
  font-size: calc(var(--sp-text-small) * 0.92);
  font-weight: var(--sp-weight-semibold);
  line-height: var(--sp-line-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-listing-big__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  min-width: 0;
}

.sp-listing-big__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sp-listing-big__meta-item .sp-icon {
  color: var(--sp-color-text-subtle);
  flex-shrink: 0;
}

.sp-listing-big__seller {
  color: var(--sp-color-text);
  font-size: calc(var(--sp-text-small) * 0.86);
  font-weight: var(--sp-weight-semibold);
  line-height: var(--sp-line-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-listing-big__time {
  color: var(--sp-color-text-muted);
  font-size: calc(var(--sp-text-small) * 0.8);
  line-height: var(--sp-line-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  .sp-listing-big__main {
    grid-template-columns: 1fr;
  }
  .sp-listing-big__hero {
    height: auto;
  }
  .sp-listing-big__hero-image {
    height: auto;
    aspect-ratio: 16/9;
  }
  .sp-listing-big__headline {
    flex-direction: column;
    align-items: flex-start;
  }
  .sp-listing-big__title-row,
  .sp-listing-big__meta {
    align-items: flex-start;
  }
  .sp-listing-big__title-row {
    width: 100%;
  }
  .sp-listing-big__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* -----------------------------------------------------------------------------
 * 3.18 List — <c-list>
 *
 * Vertical list of slot-based items. Designed to nest cleanly inside a
 * <c-paper> or <c-card> body — `flush` cancels the surrounding inset so
 * dividers run edge-to-edge of the parent surface.
 *
 * .sp-list                 base
 * .sp-list--bordered       1px divider between items
 * .sp-list--flush          extend items to the parent's edges (assumes the
 *                          parent uses --sp-inset-lg horizontal padding —
 *                          true for default paper/card bodies)
 * --------------------------------------------------------------------------- */
.sp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sp-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-gap);
  padding: var(--sp-space-2) 0;
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-tight);
  color: var(--sp-color-text);
  min-width: 0;
}

a.sp-list__item,
button.sp-list__item {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  font: inherit;
  text-align: left;
  transition: background-color var(--sp-transition);
}

a.sp-list__item:hover,
a.sp-list__item:focus-visible,
button.sp-list__item:hover,
button.sp-list__item:focus-visible {
  background-color: var(--sp-color-surface-muted);
  outline: none;
}

.sp-list--bordered > li + li {
  border-top: 1px solid var(--sp-color-border);
}

.sp-list--flush {
  margin-left: calc(var(--sp-inset-lg) * -1);
  margin-right: calc(var(--sp-inset-lg) * -1);
}

.sp-list--flush .sp-list__item {
  padding-left: var(--sp-inset-lg);
  padding-right: var(--sp-inset-lg);
}

.sp-list__item-icon {
  flex-shrink: 0;
  color: var(--sp-color-text-muted);
}

.sp-list__item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.sp-list__item-title {
  display: block;
  color: var(--sp-color-text);
  font-weight: var(--sp-weight-medium);
  line-height: var(--sp-line-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-list__item-subtitle {
  display: block;
  color: var(--sp-color-text-muted);
  font-size: calc(var(--sp-text-small) * 0.92);
  line-height: var(--sp-line-tight);
}

.sp-list__item-meta {
  flex-shrink: 0;
  color: var(--sp-color-text-muted);
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-tight);
}

/* -----------------------------------------------------------------------------
 * 3.19 Stats — <c-stat> · <c-stats>
 * --------------------------------------------------------------------------- */
.sp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-space-3);
  width: 100%;
}

.sp-stats-grid--compact {
  gap: var(--sp-space-2);
}

.sp-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-1);
  padding: var(--sp-space-3);
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-component);
  background: linear-gradient(150deg, color-mix(in srgb, var(--sp-color-brand-soft) 45%, transparent) 0%, transparent 68%), var(--sp-color-surface);
}

.sp-stats-grid--compact .sp-stat {
  padding: var(--sp-space-2) var(--sp-space-3);
}

.sp-stat__label {
  color: var(--sp-color-text-muted);
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-tight);
}

.sp-stat__value {
  color: var(--sp-color-text);
  font-size: var(--sp-text-large);
  font-weight: var(--sp-weight-bold);
  line-height: var(--sp-line-tight);
  letter-spacing: -0.01em;
}

.sp-stat__delta {
  color: var(--sp-color-success);
  font-size: var(--sp-text-small);
  font-weight: var(--sp-weight-medium);
  line-height: var(--sp-line-tight);
}

.sp-stat__delta--danger {
  color: var(--sp-color-danger);
}

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

/* -----------------------------------------------------------------------------
 * 3.20 Chart — <c-chart>
 * --------------------------------------------------------------------------- */
.sp-chart-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-2);
  padding: var(--sp-space-3);
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-radius-component);
  background: var(--sp-color-surface);
}

.sp-chart-card--compact {
  gap: var(--sp-space-1);
  padding: var(--sp-space-2) var(--sp-space-3);
}

.sp-chart {
  width: 100%;
  border-radius: var(--sp-radius-component);
  background: var(--sp-color-bg);
  border: 1px solid var(--sp-color-border);
}

/* -----------------------------------------------------------------------------
 * 3.21 Tooltip — <c-tooltip>
 *
 * Lightweight hint bubble for icons and compact controls. Trigger visibility
 * is controlled by :hover and :focus-within, so keyboard users get the same
 * behavior as pointer users.
 * --------------------------------------------------------------------------- */
.sp-tooltip {
  position: relative;
  display: inline-flex;
}

.sp-tooltip__trigger {
  display: inline-flex;
  align-items: center;
}

.sp-tooltip__bubble {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  min-width: max-content;
  max-width: min(260px, 70vw);
  padding: var(--sp-space-1) var(--sp-space-2);
  border: 1px solid var(--sp-color-border-strong);
  border-radius: var(--sp-radius-sm);
  background: color-mix(in srgb, var(--sp-color-bg) 88%, black 12%);
  color: var(--sp-color-text);
  font-size: var(--sp-text-small);
  line-height: var(--sp-line-tight);
  font-weight: var(--sp-weight-medium);
  box-shadow: var(--sp-shadow-sm);
  transform: translateY(4px);
  transition: opacity var(--sp-transition), transform var(--sp-transition);
}

.sp-tooltip__bubble::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  border: inherit;
  transform: rotate(45deg);
}

.sp-tooltip:hover .sp-tooltip__bubble,
.sp-tooltip:focus-within .sp-tooltip__bubble {
  opacity: 1;
}

.sp-tooltip--top .sp-tooltip__bubble {
  left: 50%;
  bottom: calc(100% + var(--sp-space-2));
  transform: translate(-50%, 4px);
}

.sp-tooltip--top .sp-tooltip__bubble::before {
  left: 50%;
  bottom: -5px;
  margin-left: -4px;
  border-left: 0;
  border-top: 0;
}

.sp-tooltip--top:hover .sp-tooltip__bubble,
.sp-tooltip--top:focus-within .sp-tooltip__bubble {
  transform: translate(-50%, 0);
}

.sp-tooltip--right .sp-tooltip__bubble {
  left: calc(100% + var(--sp-space-2));
  top: 50%;
  transform: translate(-4px, -50%);
}

.sp-tooltip--right .sp-tooltip__bubble::before {
  left: -5px;
  top: 50%;
  margin-top: -4px;
  border-right: 0;
  border-top: 0;
}

.sp-tooltip--right:hover .sp-tooltip__bubble,
.sp-tooltip--right:focus-within .sp-tooltip__bubble {
  transform: translate(0, -50%);
}

.sp-tooltip--bottom .sp-tooltip__bubble {
  left: 50%;
  top: calc(100% + var(--sp-space-2));
  transform: translate(-50%, -4px);
}

.sp-tooltip--bottom .sp-tooltip__bubble::before {
  left: 50%;
  top: -5px;
  margin-left: -4px;
  border-right: 0;
  border-bottom: 0;
}

.sp-tooltip--bottom:hover .sp-tooltip__bubble,
.sp-tooltip--bottom:focus-within .sp-tooltip__bubble {
  transform: translate(-50%, 0);
}

.sp-tooltip--left .sp-tooltip__bubble {
  right: calc(100% + var(--sp-space-2));
  top: 50%;
  transform: translate(4px, -50%);
}

.sp-tooltip--left .sp-tooltip__bubble::before {
  right: -5px;
  top: 50%;
  margin-top: -4px;
  border-left: 0;
  border-bottom: 0;
}

.sp-tooltip--left:hover .sp-tooltip__bubble,
.sp-tooltip--left:focus-within .sp-tooltip__bubble {
  transform: translate(0, -50%);
}

/* -----------------------------------------------------------------------------
 * 3.20 Icon — <c-icon>
 *
 * Inline SVG icon. Inherits color via `currentColor` and scales with the
 * surrounding font-size when no explicit size is set. That makes icons drop
 * into text contexts (buttons, badges, list rows) without any tweaking — the
 * cotton template only adds the wrapper <svg>; payloads live in
 * templates/icons/<name>.svg.
 *
 * .sp-icon                 base — 1em x 1em, baseline-aligned
 * .sp-icon--{size}         sm (14) | md (18) | lg (22) | xl (32)
 * --------------------------------------------------------------------------- */
.sp-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.sp-icon--sm {
  width: 14px;
  height: 14px;
}

.sp-icon--md {
  width: 18px;
  height: 18px;
}

.sp-icon--lg {
  width: 22px;
  height: 22px;
}

.sp-icon--xl {
  width: 32px;
  height: 32px;
}

/* -----------------------------------------------------------------------------
 * 4. Reduced motion
 *
 * Neutralize both keyframe animations and the global --sp-transition so any
 * `transition: ... var(--sp-transition)` declared by a component becomes a
 * 0s no-op.
 * --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sp-root {
    --sp-transition: 0s;
  }
  .sp-dropdown__menu,
  .sp-autocomplete__menu,
  .sp-modal[open] .sp-modal__panel,
  .sp-modal[open]::backdrop {
    animation: none;
  }
}

/*# sourceMappingURL=ds.css.map */