/**
 * shadcn-html — Token Layer
 * Semantic CSS custom properties matching the tweakcn.com export format.
 * OKLCH color space. Full surface/foreground pair model.
 *
 * Export a theme from tweakcn.com, replace the .spec-play and .dark blocks,
 * and every component rethemes instantly.
 */

.spec-play, dialog.dialog, dialog.sheet, dialog.alert-dialog {
  color-scheme: light;

  /* -- Surface / Foreground pairs ------------------------------ */
  --background:              oklch(1 0 0);
  --foreground:              oklch(0.1450 0 0);

  --card:                    oklch(1 0 0);
  --card-foreground:         oklch(0.1450 0 0);

  --popover:                 oklch(1 0 0);
  --popover-foreground:      oklch(0.1450 0 0);

  --primary:                 oklch(0.2050 0 0);
  --primary-foreground:      oklch(0.9850 0 0);

  --secondary:               oklch(0.9700 0 0);
  --secondary-foreground:    oklch(0.2050 0 0);

  --muted:                   oklch(0.9700 0 0);
  --muted-foreground:        oklch(0.5560 0 0);

  --accent:                  oklch(0.9700 0 0);
  --accent-foreground:       oklch(0.2050 0 0);

  --destructive:             oklch(0.5770 0.2450 27.3250);
  --destructive-foreground:  oklch(1 0 0);

  /* -- Utility tokens ------------------------------------------- */
  --border:                  oklch(0.9220 0 0);
  --input:                   oklch(0.9220 0 0);
  --ring:                    oklch(0.7080 0 0);

  /* -- Sidebar tokens ------------------------------------------- */
  --sidebar:                 oklch(0.9850 0 0);
  --sidebar-foreground:      oklch(0.1450 0 0);
  --sidebar-primary:         oklch(0.2050 0 0);
  --sidebar-primary-foreground: oklch(0.9850 0 0);
  --sidebar-accent:          oklch(0.9700 0 0);
  --sidebar-accent-foreground: oklch(0.2050 0 0);
  --sidebar-border:          oklch(0.9220 0 0);
  --sidebar-ring:            oklch(0.7080 0 0);


  /* -- Chart tokens --------------------------------------------- */
  --chart-1:                 oklch(0.8100 0.1000 252);
  --chart-2:                 oklch(0.6200 0.1900 260);
  --chart-3:                 oklch(0.5500 0.2200 263);
  --chart-4:                 oklch(0.4900 0.2200 264);
  --chart-5:                 oklch(0.4200 0.1800 266);

  /* -- Typography tokens ---------------------------------------- */
  --font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* -- Radius --------------------------------------------------- */
  --radius:                  0.625rem;
  /* Derived — matches tweakcn/shadcn scale */
  --radius-sm:               calc(var(--radius) - 4px);
  --radius-md:               calc(var(--radius) - 2px);
  --radius-lg:               var(--radius);
  --radius-xl:               calc(var(--radius) + 4px);

  /* -- Spacing -------------------------------------------------- */
  --spacing:                 0.25rem;

  /* -- Tracking ------------------------------------------------- */
  --tracking-normal:         0em;

  /* -- Shadow scale --------------------------------------------- */
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs:  0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm:  0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow:     0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md:  0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg:  0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl:  0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

/* -- Dark mode -------------------------------------------------- */
.dark {
  color-scheme: dark;

  --background:              oklch(0.1450 0 0);
  --foreground:              oklch(0.9850 0 0);

  --card:                    oklch(0.2050 0 0);
  --card-foreground:         oklch(0.9850 0 0);

  --popover:                 oklch(0.2690 0 0);
  --popover-foreground:      oklch(0.9850 0 0);

  --primary:                 oklch(0.9220 0 0);
  --primary-foreground:      oklch(0.2050 0 0);

  --secondary:               oklch(0.2690 0 0);
  --secondary-foreground:    oklch(0.9850 0 0);

  --muted:                   oklch(0.2690 0 0);
  --muted-foreground:        oklch(0.7080 0 0);

  --accent:                  oklch(0.3710 0 0);
  --accent-foreground:       oklch(0.9850 0 0);

  --destructive:             oklch(0.7040 0.1910 22.2160);
  --destructive-foreground:  oklch(0.9850 0 0);

  --border:                  oklch(0.2750 0 0);
  --input:                   oklch(0.3250 0 0);
  --ring:                    oklch(0.5560 0 0);

  --sidebar:                 oklch(0.2050 0 0);
  --sidebar-foreground:      oklch(0.9850 0 0);
  --sidebar-primary:         oklch(0.4880 0.2430 264.3760);
  --sidebar-primary-foreground: oklch(0.9850 0 0);
  --sidebar-accent:          oklch(0.2690 0 0);
  --sidebar-accent-foreground: oklch(0.9850 0 0);
  --sidebar-border:          oklch(0.2750 0 0);
  --sidebar-ring:            oklch(0.4390 0 0);

  --chart-1:                 oklch(0.8100 0.1000 252);
  --chart-2:                 oklch(0.6200 0.1900 260);
  --chart-3:                 oklch(0.5500 0.2200 263);
  --chart-4:                 oklch(0.4900 0.2200 264);
  --chart-5:                 oklch(0.4200 0.1800 266);
}


/* -- Accordion component --------------------------------------- */

@layer components {
  .accordion {
    display: flex;
    flex-direction: column;
  }

  .accordion-item {
    border-bottom: 1px solid var(--border);

    &:last-child { border-bottom: none; }

    /* -- Content animation (CSS-only) ------------------------- */
    & ::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
    }

    &[open] ::details-content {
      block-size: auto;
    }
  }

  @starting-style {
    .accordion-item[open] ::details-content {
      block-size: 0;
    }
  }

  /* Remove default details marker */
  .accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    list-style: none;
    color: var(--foreground);
    transition: color 150ms;

    &::-webkit-details-marker { display: none; }
    &::marker { content: ''; }
    &:hover { text-decoration: underline; }
  }

  /* Chevron rotation */
  .accordion-chevron {
    color: var(--muted-foreground);
    transition: transform 200ms ease;
    flex-shrink: 0;

    details[open] > .accordion-trigger & {
      transform: rotate(180deg);
    }
  }

  /* Content */
  .accordion-content {
    padding-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--muted-foreground);
    overflow: hidden;

    & p { margin: 0; }
  }
}


@layer components {
  .alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--foreground);
    background-color: var(--background);

    &[data-variant="destructive"] {
      border-color: var(--destructive);
      color: var(--destructive);

      & .alert-title {
        color: var(--destructive);
      }

      & .alert-description {
        color: var(--destructive);
        opacity: 0.9;
      }

      & .alert-icon {
        color: var(--destructive);
      }
    }
  }

  .alert-icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--foreground);
  }

  .alert-content {
    flex: 1;
    min-width: 0;
  }

  .alert-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--foreground);
  }

  .alert-description {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--muted-foreground);
  }

  .alert-action {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
  }
}


@layer components {
  dialog.alert-dialog {
    border: none;
    border-radius: var(--radius-xl);
    background: var(--background);
    color: var(--foreground);
    padding: 0;
    max-width: 28rem;
    width: calc(100% - 2rem);
    box-shadow: var(--shadow-lg);
    margin: auto;
    position: fixed;
    inset: 0;

    /* Entry/exit animation */
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
    transition: opacity 200ms ease, transform 200ms ease, display 200ms allow-discrete;

    &[open] {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    &::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
      transition: all 200ms ease, display 200ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.45);
      backdrop-filter: blur(3px);
    }

    /* Block Escape key — user must choose an action */
    &::backdrop {
      pointer-events: auto;
    }
  }

  @starting-style {
    dialog.alert-dialog[open] {
      opacity: 0;
      transform: translateY(-0.5rem) scale(0.98);
    }
    dialog.alert-dialog[open]::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
    }
  }

  .alert-dialog-content {
    padding: 1.5rem;
  }

  .alert-dialog-header {
    margin-bottom: 1.25rem;
  }

  .alert-dialog-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }

  .alert-dialog-description {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.5;
  }

  .alert-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }
}


@layer components {
  .avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--muted);

    &[data-size="sm"] {
      width: 2rem;
      height: 2rem;
      font-size: 0.6875rem;
    }

    &[data-size="lg"] {
      width: 3rem;
      height: 3rem;
      font-size: 0.875rem;
    }
  }

  .avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }

  .avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background-color: var(--muted);
    position: absolute;
    inset: 0;
  }

  /* Hide fallback when image is loaded */
  .avatar:has(.avatar-image:not([data-error])) .avatar-fallback {
    display: none;
  }

  .avatar-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: #16a34a;
    border: 2px solid var(--background);
  }

  /* Avatar group */
  .avatar-group {
    display: flex;
    align-items: center;

    & .avatar {
      border: 2px solid var(--background);
      margin-left: -0.5rem;

      &:first-child {
        margin-left: 0;
      }
    }
  }

  .avatar-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 500;
    border: 2px solid var(--background);
    margin-left: -0.5rem;
  }
}


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

@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5rem;

    &[data-variant="outline"] {
      border: 1px solid var(--border);
      color: var(--muted-foreground);
    }

    &[data-variant="secondary"] {
      background: var(--secondary);
      color: var(--secondary-foreground);
    }

    &[data-variant="default"] {
      background: var(--primary);
      color: var(--primary-foreground);
    }
  }
}


@layer components {
  .breadcrumb-list {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.375rem; list-style: none; margin: 0; padding: 0;
    font-size: 0.875rem;
  }
  .breadcrumb-item { display: inline-flex; align-items: center; gap: 0.375rem; }
  .breadcrumb-link {
    color: var(--muted-foreground); text-decoration: none;
    border-radius: var(--radius-sm); outline: none;
    transition: color 150ms ease;
    &:hover { color: var(--foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .breadcrumb-separator {
    color: var(--muted-foreground); font-size: 0.75rem;
    & svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

    /* RTL: auto-flip chevron separators */
    [dir="rtl"] & svg { scale: -1 1; }
  }
  .breadcrumb-page { color: var(--foreground); font-weight: 400; }
  .breadcrumb-ellipsis {
    display: flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; color: var(--muted-foreground);
    & span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  }

  /* -- Accessibility ------------------------------------------ */

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

  @media (prefers-contrast: more) {
    .breadcrumb-link { text-decoration: underline; }
    .breadcrumb-page { font-weight: 600; }
  }

  @media (forced-colors: active) {
    .breadcrumb-link {
      &:hover { forced-color-adjust: none; color: HighlightText; background: Highlight; }
    }
    .breadcrumb-page { color: CanvasText; }
    .breadcrumb-separator { color: GrayText; }
  }
}


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

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 150ms ease;
    outline: none;
    flex-shrink: 0;
    height: 2.25rem;
    padding: 0 1rem;
    background-color: var(--primary);
    color: var(--primary-foreground);

    & svg {
      pointer-events: none;
      flex-shrink: 0;

      &:not([class*="size-"]) { width: 1rem; height: 1rem; }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled, &[aria-disabled="true"] {
      pointer-events: none;
      opacity: 0.5;
    }

    /* -- Variants -------------------------------------------- */
    &[data-variant="default"] {
      background-color: var(--primary);
      color: var(--primary-foreground);

      &:hover { opacity: 0.9; }
    }

    &[data-variant="secondary"] {
      background-color: var(--secondary);
      color: var(--secondary-foreground);

      &:hover { opacity: 0.8; }
    }

    &[data-variant="outline"] {
      background-color: var(--background);
      color: var(--foreground);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-xs);

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }
    }

    &[data-variant="ghost"] {
      background-color: transparent;
      color: var(--foreground);
      border-color: transparent;

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }
    }

    &[data-variant="destructive"] {
      background-color: var(--destructive);
      color: var(--destructive-foreground);

      &:hover { opacity: 0.9; }
    }

    &[data-variant="link"] {
      background-color: transparent;
      color: var(--primary);
      height: auto;
      padding: 0;
      text-underline-offset: 4px;

      &:hover { text-decoration: underline; }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="xs"]      { height: 1.75rem; padding: 0 0.5rem;  font-size: 0.75rem; border-radius: var(--radius-sm); }
    &[data-size="sm"]      { height: 2rem;    padding: 0 0.75rem; font-size: 0.8125rem; }
    &[data-size="lg"]      { height: 2.75rem; padding: 0 2rem;    font-size: 1rem; }
    &[data-size="icon"]    { height: 2.25rem; width: 2.25rem;  padding: 0; }
    &[data-size="icon-xs"] { height: 1.75rem; width: 1.75rem;  padding: 0; border-radius: var(--radius-sm); }
    &[data-size="icon-sm"] { height: 2rem;    width: 2rem;     padding: 0; }
    &[data-size="icon-lg"] { height: 2.75rem; width: 2.75rem;  padding: 0; }
  }

  /* -- Accessibility ------------------------------------------ */

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

  @media (prefers-contrast: more) {
    .btn {
      border: 2px solid transparent;

      &[data-variant="default"],
      &[data-variant="secondary"],
      &[data-variant="destructive"] {
        border-color: currentColor;
      }

      &[data-variant="outline"],
      &[data-variant="ghost"] {
        border-color: var(--foreground);
      }
    }
  }

  @media (forced-colors: active) {
    .btn {
      border: 1px solid ButtonText;

      &:disabled, &[aria-disabled="true"] {
        border-color: GrayText;
        color: GrayText;
      }
    }
  }
}


/* -- Button Group component ------------------------------------- */

@layer components {
  .btn-group {
    display: inline-flex;
    align-items: stretch;

    /* Collapse borders between adjacent buttons */
    & > .btn + .btn {
      margin-inline-start: -1px;
    }

    /* Remove internal radii for connected appearance */
    & > .btn:not(:first-child):not(:has(+ [role="separator"])) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    & > .btn:not(:last-child):not([role="separator"] + .btn) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    /* Buttons after a separator get start radii back */
    & > [role="separator"] + .btn {
      border-start-start-radius: var(--radius-md);
      border-end-start-radius: var(--radius-md);
    }

    /* Buttons before a separator get end radii back */
    & > .btn:has(+ [role="separator"]) {
      border-start-end-radius: var(--radius-md);
      border-end-end-radius: var(--radius-md);
    }

    /* Ensure hovered/focused button stacks above its neighbors */
    & > .btn:hover,
    & > .btn:focus-visible {
      position: relative;
      z-index: 1;
    }

    /* -- Separator ------------------------------------------- */
    & > [role="separator"] {
      width: 1px;
      align-self: stretch;
      background: var(--border);
      border: 0;
      margin: 0;
      padding: 0;
      flex-shrink: 0;
    }

    /* -- Vertical orientation -------------------------------- */
    &[data-orientation="vertical"] {
      flex-direction: column;
      align-items: stretch;

      & > .btn + .btn {
        margin-inline-start: 0;
        margin-top: -1px;
      }

      & > .btn:not(:first-child) {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        border-end-start-radius: var(--radius-md);
      }

      & > .btn:not(:last-child) {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        border-start-end-radius: var(--radius-md);
      }

      & > .btn:first-child {
        border-start-start-radius: var(--radius-md);
        border-start-end-radius: var(--radius-md);
      }

      & > .btn:last-child {
        border-end-start-radius: var(--radius-md);
        border-end-end-radius: var(--radius-md);
      }

      & > [role="separator"] {
        width: auto;
        height: 1px;
      }
    }
  }

  @media (forced-colors: active) {
    .btn-group > [role="separator"] {
      background: ButtonText;
    }
  }
}


@layer components {
  .calendar {
    display: inline-flex;
    flex-direction: column;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background-color: var(--card);
    user-select: none;
  }

  .calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem 0.5rem;
  }

  .calendar-heading {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
  }

  .calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: transparent;
    color: var(--foreground);
    cursor: pointer;
    transition: background-color 150ms ease;

    &:hover {
      background-color: var(--accent);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    & svg {
      width: 0.875rem;
      height: 0.875rem;
    }
  }

  .calendar-grid {
    border-collapse: collapse;
    border-spacing: 0;
  }

  .calendar-day-label {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted-foreground);
    text-align: center;
    vertical-align: middle;
  }

  .calendar-day {
    width: 2.25rem;
    height: 2.25rem;
    text-align: center;
    vertical-align: middle;
    padding: 0;

    & button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      font-size: 0.8125rem;
      border: none;
      border-radius: var(--radius-md);
      background-color: transparent;
      color: var(--foreground);
      cursor: pointer;
      transition: background-color 150ms ease, color 150ms ease;

      &:hover {
        background-color: var(--accent);
      }

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }

    &[data-today] button {
      background-color: var(--accent);
      font-weight: 600;
    }

    &[data-selected] button {
      background-color: var(--primary);
      color: var(--primary-foreground);

      &:hover {
        opacity: 0.9;
      }
    }

    &[data-outside] button {
      color: var(--muted-foreground);
      opacity: 0.5;
    }

    &[data-disabled] button {
      color: var(--muted-foreground);
      opacity: 0.35;
      cursor: not-allowed;
    }
  }
}


/* -- Card component -------------------------------------------- */

@layer components {
  .card {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    container-type: inline-size;
  }

  .card-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.5rem;
    padding-bottom: 0;
  }

  .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
  }

  .card-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.6;
  }

  .card-content {
    padding: 1.5rem;
  }

  .card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    padding-top: 0;
  }

  /* -- Container query: compact card in narrow containers -- */
  @container (max-width: 280px) {
    .card-header { padding: 1rem; padding-bottom: 0; }
    .card-content { padding: 1rem; }
    .card-footer { padding: 1rem; padding-top: 0; }
    .card-title { font-size: 1rem; }
  }
}


@layer components {
  .carousel {
    position: relative;
    width: 100%;

    /* ── Viewport ──────────────────────────────── */
    & .carousel-viewport {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      gap: 1rem;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar { display: none; }
    }

    /* ── Slide ─────────────────────────────────── */
    & .carousel-slide {
      flex: 0 0 100%;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      min-width: 0;
    }

    /* ── Prev / Next buttons ───────────────────── */
    & .carousel-prev,
    & .carousel-next {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      border: 1px solid var(--border);
      border-radius: 9999px;
      background-color: var(--background);
      color: var(--foreground);
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      transition: background-color 150ms ease, opacity 150ms ease;
      font-size: 0.875rem;
      z-index: 1;

      &:hover { background-color: var(--accent); }
      &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
      &:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
      & svg { width: 1rem; height: 1rem; }
    }

    & .carousel-prev { left: -1rem; }
    & .carousel-next { right: -1rem; }

    /* ── Dot indicators ────────────────────────── */
    & .carousel-dots {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
      padding-block: 0.75rem;
    }

    & .carousel-dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 9999px;
      border: none;
      padding: 0;
      cursor: pointer;
      background-color: var(--border);
      transition: background-color 150ms ease, scale 150ms ease;

      &[aria-current="true"] {
        background-color: var(--foreground);
        scale: 1.25;
      }

      &:hover:not([aria-current="true"]) {
        background-color: var(--muted-foreground);
      }

      &:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }

    /* ── Counter text ──────────────────────────── */
    & .carousel-counter {
      text-align: center;
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      padding-block-start: 0.5rem;
    }

    /* ── Vertical orientation ──────────────────── */
    &[data-orientation="vertical"] {
      & .carousel-viewport {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        overscroll-behavior-x: unset;
        overscroll-behavior-y: contain;
      }

      & .carousel-prev,
      & .carousel-next {
        left: 50%;
        right: auto;
        translate: -50% 0;
        top: auto;
      }
      & .carousel-prev { top: -1rem; bottom: auto; }
      & .carousel-next { bottom: -1rem; top: auto; }

      & .carousel-dots { flex-direction: column; }
    }
  }

  /* ── Accessibility ─────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .carousel .carousel-viewport { scroll-behavior: auto; }
    .carousel .carousel-prev,
    .carousel .carousel-next { transition: none; }
    .carousel .carousel-dot { transition: none; }
  }

  @media (prefers-contrast: more) {
    .carousel .carousel-prev,
    .carousel .carousel-next {
      border-width: 2px;
    }
    .carousel .carousel-dot {
      border: 1px solid var(--foreground);
    }
  }

  @media (forced-colors: active) {
    .carousel .carousel-prev,
    .carousel .carousel-next {
      border: 1px solid ButtonText;
      background: ButtonFace;
      color: ButtonText;
    }
    .carousel .carousel-dot {
      background: ButtonText;
      &[aria-current="true"] { background: Highlight; }
    }
  }
}


/* -- Checkbox component ----------------------------------------- */

@layer components {
  .checkbox {
    appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--background);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background-color 150ms, border-color 150ms;

    &:checked {
      background-color: var(--primary);
      border-color: var(--primary);

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 45%;
        width: 6px;
        height: 10px;
        border: solid var(--primary-foreground);
        border-width: 0 2px 2px 0;
        transform: translate(-50%, -50%) rotate(45deg);
      }
    }

    &:indeterminate {
      background-color: var(--primary);
      border-color: var(--primary);

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 2px;
        background: var(--primary-foreground);
        transform: translate(-50%, -50%);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &:is([aria-invalid="true"], :user-invalid) {
      border-color: var(--destructive);
    }
  }

  /* -- Checkbox item layout --------------------------------- */
  .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      cursor: pointer;
    }
  }

  .checkbox-item-block {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      cursor: pointer;
    }

    & > .checkbox {
      margin-top: 0.125rem;
    }
  }

  /* Disabled auto-styling */
  .checkbox-item:has(.checkbox:disabled),
  .checkbox-item-block:has(.checkbox:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .checkbox {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .checkbox {
      border-width: 2px;
    }

    .checkbox:disabled {
      opacity: 0.7;
    }
  }

  @media (forced-colors: active) {
    .checkbox {
      appearance: auto;
    }
  }
}


@layer components {
  .collapsible {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;

    & ::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
    }

    &[open] ::details-content {
      block-size: auto;
    }
  }

  @starting-style {
    .collapsible[open] ::details-content {
      block-size: 0;
    }
  }

  .collapsible-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--foreground);
    list-style: none;

    &:hover {
      background-color: var(--accent);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }

    &::-webkit-details-marker {
      display: none;
    }
  }

  .collapsible-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--muted-foreground);
    transition: transform 200ms ease;
    flex-shrink: 0;

    details[open] > summary > & {
      transform: rotate(180deg);
    }
  }

  .collapsible-content {
    padding: 0 1rem 0.75rem;
    font-size: 0.875rem;
    color: var(--muted-foreground);
    line-height: 1.6;
  }
}


/* -- Color Picker component ------------------------------------- */

@layer components {
  .color-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    box-shadow: var(--shadow-xs);

    & input[type="color"] {
      -webkit-appearance: none;
      appearance: none;
      width: 2rem;
      height: 2rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      padding: 0;
      background: none;

      &::-webkit-color-swatch-wrapper { padding: 0; }
      &::-webkit-color-swatch {
        border: none;
        border-radius: calc(var(--radius-sm) - 1px);
      }
      &::-moz-color-swatch {
        border: none;
        border-radius: calc(var(--radius-sm) - 1px);
      }
    }

    & .color-picker-value {
      font-size: 0.8125rem;
      font-family: var(--font-mono);
      color: var(--muted-foreground);
    }
  }
}


/* -- Combobox component ---------------------------------------- */

@layer components {
  .combobox {
    position: relative;
  }

  .combobox-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .combobox-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    text-align: left;
    font-weight: 400;
  }

  .combobox-value[data-placeholder] {
    color: var(--muted-foreground);
  }

  .combobox-chevron {
    flex-shrink: 0;
    color: var(--muted-foreground);
    opacity: 0.5;
  }

  .combobox-content {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: 0;
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;

    /* -- Anchor positioning -- */
    top: anchor(bottom);
    left: anchor(left);
    width: anchor-size(width);
    margin-top: 4px;
    position-try-fallbacks: flip-block;

    /* -- Animation --------------------------------------------- */
    opacity: 0;
    transform: scale(0.96) translateY(-0.25rem);
    transition: opacity 150ms ease, transform 150ms ease,
                display 150ms allow-discrete;

    &:popover-open {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @starting-style {
    .combobox-content:popover-open {
      opacity: 0;
      transform: scale(0.96) translateY(-0.25rem);
    }
  }

  .combobox-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .combobox-search-icon {
    flex-shrink: 0;
    color: var(--muted-foreground);
  }

  .combobox-search-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;

    &::placeholder { color: var(--muted-foreground); }
  }

  .combobox-listbox {
    max-height: 16rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem;
  }

  .combobox-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: calc(var(--radius) * 0.6);
    font-size: 0.875rem;
    cursor: pointer;
    outline: none;
    transition: background 100ms;

    &:hover, &[data-highlighted] {
      background-color: var(--accent);
      color: var(--accent-foreground);
    }

    &[aria-selected="true"]::before {
      content: '';
      display: inline-block;
      width: 1rem;
      height: 1rem;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
      background-size: contain;
      flex-shrink: 0;
    }

    &[aria-disabled="true"] {
      pointer-events: none;
      opacity: 0.5;
    }
  }

  .combobox-empty {
    padding: 1.5rem 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--muted-foreground);
  }

  .combobox-group-label {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
  }

  .combobox-separator {
    height: 1px;
    background: var(--border);
    margin: 0.25rem -0.25rem;
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .combobox-content {
      transition: none;
    }
    .combobox-item {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .combobox-content {
      border-color: ButtonText;
    }
    .combobox-item {
      &:hover, &[data-highlighted] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
      }
    }
  }
}


@layer components {
  dialog.command {
    border: none; border-radius: var(--radius-xl);
    background: var(--popover); color: var(--popover-foreground);
    padding: 0; max-width: 32rem; width: calc(100% - 2rem);
    box-shadow: var(--shadow-lg); margin: auto; position: fixed; inset: 0;
    top: 15%; bottom: auto; overflow: hidden;
    opacity: 0; transform: scale(0.98);
    transition: opacity 150ms ease, transform 150ms ease, display 150ms allow-discrete;

    &[open] { opacity: 1; transform: scale(1); }
    &::backdrop { background: oklch(0 0 0 / 0); transition: all 150ms ease, display 150ms allow-discrete; }
    &[open]::backdrop { background: oklch(0 0 0 / 0.45); }
  }

  @starting-style {
    dialog.command[open] { opacity: 0; transform: scale(0.98); }
    dialog.command[open]::backdrop { background: oklch(0 0 0 / 0); }
  }

  .command-input-wrapper {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
    & svg { width: 1rem; height: 1rem; color: var(--muted-foreground); flex-shrink: 0; }
  }

  .command-input {
    flex: 1; border: none; background: transparent;
    font-size: 0.875rem; color: var(--foreground); outline: none; font-family: inherit;
    &::placeholder { color: var(--muted-foreground); }
  }

  .command-list { max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; padding: 0.25rem; }
  .command-group { padding: 0.25rem 0; }
  .command-group-heading { margin: 0; padding: 0.375rem 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }

  .command-item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.5rem 0.5rem; border: none; border-radius: var(--radius-md);
    background: transparent; color: var(--foreground); font-size: 0.8125rem;
    font-family: inherit; text-align: left; cursor: pointer; outline: none;
    &:hover, &[data-highlighted] { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
    &[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
    & svg { width: 1rem; height: 1rem; color: var(--muted-foreground); flex-shrink: 0; }
  }

  .command-separator { height: 1px; background-color: var(--border); margin: 0.25rem -0.25rem; }
  .command-shortcut { margin-inline-start: auto; font-size: 0.6875rem; color: var(--muted-foreground); font-family: var(--font-mono); }
  .command-empty { padding: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    dialog.command { transition: none; opacity: 1; transform: none; }
    dialog.command::backdrop { transition: none; }
  }

  @media (prefers-contrast: more) {
    dialog.command { border: 2px solid var(--border); }
    .command-item {
      &:hover, &[data-highlighted] { outline: 1px solid var(--foreground); }
    }
  }

  @media (forced-colors: active) {
    dialog.command { border: 2px solid CanvasText; }
    .command-item {
      &:hover, &[data-highlighted] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    }
    .command-separator { background-color: CanvasText; }
  }
}


@layer components {
  .context-menu-trigger {
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed var(--border); border-radius: var(--radius-lg);
    padding: 3rem; font-size: 0.875rem; color: var(--muted-foreground); cursor: default;
  }

  .context-menu {
    margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg);
    background-color: var(--popover); color: var(--popover-foreground);
    padding: 0.25rem; box-shadow: var(--shadow-md); min-width: 10rem;
    opacity: 0; transform: scale(0.95);
    transition: opacity 100ms ease, transform 100ms ease, display 100ms allow-discrete;

    &:popover-open { opacity: 1; transform: scale(1); }
  }

  @starting-style {
    .context-menu:popover-open { opacity: 0; transform: scale(0.95); }
  }

  .context-menu-item {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.375rem 0.5rem; border: none; border-radius: var(--radius-md);
    background: transparent; color: var(--popover-foreground);
    font-size: 0.8125rem; font-family: inherit; text-align: left; cursor: pointer;
    transition: background-color 100ms ease;

    &:hover, &[data-highlighted] { background-color: var(--accent); color: var(--accent-foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
  }

  .context-menu-separator { height: 1px; background-color: var(--border); margin: 0.25rem -0.25rem; }
}


/* -- Date Picker component -------------------------------------- */
/* Uses the .input class with type="date" or type="datetime-local" */
/* This file adds date-specific overrides only.                     */

@layer components {
  .date-input {
    height: 2.5rem;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;
    cursor: pointer;

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Style the calendar icon */
    &::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 150ms;

      &:hover { opacity: 1; }
    }
  }
}


/* -- Dialog component ------------------------------------------ */

@layer components {
  dialog.dialog {
    border: none;
    border-radius: var(--radius-xl);
    background-color: var(--popover);
    color: var(--popover-foreground);
    padding: 0;
    margin: auto;
    position: fixed;
    inset: 0;
    max-width: 28rem;
    width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    box-shadow: 0 25px 80px oklch(0 0 0 / 0.25), 0 0 0 1px var(--border);
    opacity: 0;
    transform: translateY(-0.5rem) scale(0.98);
    transition: opacity 200ms ease, transform 200ms ease, display 200ms allow-discrete;

    &[open] {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* -- Sizes ------------------------------------------------ */
    &[data-size="sm"]   { max-width: 24rem; }
    &[data-size="lg"]   { max-width: 32rem; }
    &[data-size="xl"]   { max-width: 40rem; }
    &[data-size="full"] { max-width: calc(100vw - 2rem); }

    /* -- Backdrop --------------------------------------------- */
    &::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
      transition: all 200ms ease, display 200ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.45);
      backdrop-filter: blur(3px);
    }
  }

  @starting-style {
    dialog.dialog[open] {
      opacity: 0;
      transform: translateY(-0.5rem) scale(0.98);
    }

    dialog.dialog[open]::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
    }
  }

  /* -- Content sections ------------------------------------- */
  .dialog-content { padding: 1.5rem; }
  .dialog-header  { margin-bottom: 1rem; }
  .dialog-title   { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.375rem; letter-spacing: -0.01em; }
  .dialog-description { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; line-height: 1.6; }
  .dialog-body    { margin-top: 1rem; }
  .dialog-footer  { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }
}


/* -- Dropdown component ---------------------------------------- */

@layer components {
  .dropdown-content {
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.25rem;
    min-width: 8rem;
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.12), 0 0 0 1px var(--border);

    /* -- Anchor positioning ------------------------------------ */
    position: fixed;
    inset: auto;
    top: anchor(bottom);
    left: anchor(left);
    margin: 0;
    margin-top: 4px;
    position-try-fallbacks: flip-block;

    /* -- Animation --------------------------------------------- */
    opacity: 0;
    transform: scale(0.96) translateY(-0.25rem);
    transition: opacity 150ms ease, transform 150ms ease,
                display 150ms allow-discrete;

    &:popover-open {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  @starting-style {
    .dropdown-content:popover-open {
      opacity: 0;
      transform: scale(0.96) translateY(-0.25rem);
    }
  }

  .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: calc(var(--radius) * 0.6);
    font-size: 0.875rem;
    border: none;
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    outline: none;
    text-align: left;

    &:hover, &[data-highlighted] {
      background-color: var(--accent);
      color: var(--accent-foreground);
    }

    &[data-variant="destructive"] {
      &:hover, &[data-highlighted] {
        background-color: var(--destructive);
        color: var(--destructive-foreground);
      }
    }

    &:disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }

  /* -- Checkbox / Radio indicators ----------------------------- */
  .dropdown-check,
  .dropdown-radio {
    padding-inline-start: 1.5rem;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      inset-inline-start: 0.375rem;
      top: 50%;
      transform: translateY(-50%);
      width: 0.875rem;
      height: 0.875rem;
    }
  }

  .dropdown-check[aria-checked="true"]::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .dropdown-radio[aria-checked="true"]::before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .dropdown-separator {
    height: 1px;
    background: var(--border);
    margin: 0.25rem -0.25rem;
  }

  .dropdown-label {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted-foreground);
  }

  .dropdown-shortcut {
    margin-inline-start: auto;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    letter-spacing: 0.05em;
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .dropdown-content {
      transition: none;
    }
    .dropdown-item {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .dropdown-content {
      border-color: ButtonText;
    }
    .dropdown-item {
      &:hover, &[data-highlighted] {
        forced-color-adjust: none;
        background: Highlight;
        color: HighlightText;
      }
    }
  }
}


/* -- File Input component --------------------------------------- */

@layer components {
  .file-input {
    width: 100%;
    height: 2.5rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;
    padding: 0;
    cursor: pointer;

    &::file-selector-button {
      height: 100%;
      border: none;
      border-right: 1px solid var(--input);
      background: var(--muted);
      color: var(--foreground);
      font-size: 0.875rem;
      font-weight: 500;
      font-family: var(--font-sans);
      padding: 0 0.75rem;
      margin-right: 0.75rem;
      cursor: pointer;
      transition: background 150ms;

      &:hover { background: var(--accent); }
    }

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }
}


/* -- Form component --------------------------------------------- */

@layer components {
  .form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* -- Form field -------------------------------------------- */
  .form-field {
    display: flex;
    flex-direction: column;
    gap: 0;

    /* -- Horizontal orientation (label beside control) ------- */
    &[data-orientation="horizontal"] {
      flex-direction: row;
      align-items: start;
      gap: 1rem;

      & > .label {
        margin-bottom: 0;
        padding-top: 0.5rem;
        min-width: 8rem;
        flex-shrink: 0;
      }
    }

    /* -- Invalid state -------------------------------------- */
    &[data-invalid] {
      & > .field-description {
        color: var(--destructive);
      }
    }
  }

  /* -- Inline field (checkbox, switch, radio inline) -------- */
  .form-field-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > .label {
      margin-bottom: 0;
    }
  }

  /* -- Notification / switch row layout --------------------- */
  .form-field-row {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-xs);

    & > div {
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
    }

    & > div > .label {
      margin-bottom: 0;
      line-height: 1.4;
    }

    & > div > .field-description {
      margin: 0;
    }

    &[data-disabled] {
      opacity: 0.6;
    }
  }

  /* -- Button actions row ----------------------------------- */
  .form-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding-top: 0.5rem;
  }

  /* -- Fieldset --------------------------------------------- */
  .form-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & > legend {
      font-size: 0.875rem;
      font-weight: 500;
      font-family: var(--font-sans);
      color: var(--foreground);
      padding: 0;
      margin-bottom: 0.25rem;
    }

    & > .field-description {
      margin: -0.25rem 0 0.5rem;
    }
  }

  /* -- Form group (vertical stack of fields) ---------------- */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-contrast: more) {
    .form-field-row {
      border-width: 2px;
    }
  }

  @media (forced-colors: active) {
    .form-field-row {
      border-color: ButtonBorder;
    }

    .form-fieldset > legend {
      color: LinkText;
    }
  }
}


/* -- Icon component ---------------------------------------- */
/* Styling for Lucide CDN icons (<i data-lucide="name">).     */
/* Lucide replaces <i> with <svg>, these styles target that.  */

@layer components {
  [data-lucide] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
    pointer-events: none;

    /* -- Sizes via data-size --------------------------------- */
    &[data-size="xs"] { width: 0.75rem; height: 0.75rem; }
    &[data-size="sm"] { width: 0.875rem; height: 0.875rem; }
    &[data-size="md"] { width: 1.25rem; height: 1.25rem; }
    &[data-size="lg"] { width: 1.5rem; height: 1.5rem; }
    &[data-size="xl"] { width: 2rem; height: 2rem; }

    /* -- Spin animation ------------------------------------- */
    &[data-animate="spin"] {
      animation: icon-spin 1s linear infinite;
    }
  }

  @keyframes icon-spin {
    to { transform: rotate(360deg); }
  }

  /* ---- Accessibility ---------------------------------------- */

  @media (prefers-reduced-motion: reduce) {
    [data-lucide] {
      animation: none !important;
      transition: none !important;
    }
  }

  @media (prefers-contrast: more) {
    [data-lucide] {
      stroke-width: 2.5;
    }
  }

  @media (forced-colors: active) {
    [data-lucide] {
      color: CanvasText;
    }
  }
}


@layer components {
  .image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin: 0;

    & > img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* -- Fit variants ---------------------------------------- */
    &[data-fit="contain"] > img { object-fit: contain; }
    &[data-fit="fill"]    > img { object-fit: fill; }
    &[data-fit="none"]    > img { object-fit: none; }

    /* -- Aspect ratio ---------------------------------------- */
    &[data-ratio="1/1"]  { aspect-ratio: 1 / 1; }
    &[data-ratio="4/3"]  { aspect-ratio: 4 / 3; }
    &[data-ratio="3/2"]  { aspect-ratio: 3 / 2; }
    &[data-ratio="16/9"] { aspect-ratio: 16 / 9; }
    &[data-ratio="21/9"] { aspect-ratio: 21 / 9; }
    &[data-ratio="3/4"]  { aspect-ratio: 3 / 4; }

    /* -- Radius variants ------------------------------------- */
    &[data-radius="none"] { border-radius: 0; }
    &[data-radius="sm"]   { border-radius: var(--radius-sm); }
    &[data-radius="md"]   { border-radius: var(--radius-md); }
    &[data-radius="full"] { border-radius: 9999px; }

    /* -- Preview cursor -------------------------------------- */
    &[data-preview] {
      cursor: zoom-in;
    }

    /* -- Fallback -------------------------------------------- */
    & > .image-fallback {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--muted);
      color: var(--muted-foreground);

      & > svg {
        width: 2.5rem;
        height: 2.5rem;
        opacity: 0.5;
      }
    }

    /* Hide fallback when image loads successfully */
    &:has(> img:not([data-error])) > .image-fallback {
      display: none;
    }
  }

  /* -- Caption ----------------------------------------------- */
  .image-caption {
    padding: 0.625rem 0 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--muted-foreground);
    text-wrap: pretty;
  }

  /* -- Lightbox dialog --------------------------------------- */
  dialog.image-lightbox {
    border: none;
    background: transparent;
    padding: 0;
    margin: auto;
    position: fixed;
    inset: 0;
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    opacity: 0;
    transition: opacity 200ms ease, display 200ms allow-discrete;

    &[open] {
      opacity: 1;
    }

    &::backdrop {
      background: oklch(0 0 0 / 0);
      transition: all 200ms ease, display 200ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.85);
    }
  }

  @starting-style {
    dialog.image-lightbox[open] {
      opacity: 0;
    }

    dialog.image-lightbox[open]::backdrop {
      background: oklch(0 0 0 / 0);
    }
  }

  .image-lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;

    & > img {
      max-width: 90vw;
      max-height: 85vh;
      object-fit: contain;
      border-radius: var(--radius-md);
      transition: transform 200ms ease;
      user-select: none;
      -webkit-user-drag: none;
    }
  }

  .image-lightbox-toolbar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.25rem;
    z-index: 1;
  }

  .image-lightbox-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--radius-md);
    background: oklch(0 0 0 / 0.5);
    color: white;
    cursor: pointer;
    transition: background 150ms ease;

    &:hover {
      background: oklch(0 0 0 / 0.7);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    & > svg {
      width: 1rem;
      height: 1rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog.image-lightbox,
    dialog.image-lightbox::backdrop,
    .image-lightbox-content > img {
      transition: none;
    }
  }
}


/* -- Input component ------------------------------------------- */

@layer components {
  .input {
    height: 2.5rem;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &::placeholder { color: var(--muted-foreground); }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* -- Readonly state -------------------------------------- */
    &:read-only:not([type="file"]) {
      background: var(--muted);
      cursor: default;
      opacity: 0.7;

      &:focus {
        border-color: var(--input);
        box-shadow: var(--shadow-xs);
      }
    }

    /* -- Invalid state --------------------------------------- */
    &:is([aria-invalid="true"], :user-invalid) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }

    /* -- File input ------------------------------------------ */
    &[type="file"] {
      padding: 0;
      font-size: 0.875rem;

      &::file-selector-button {
        height: 100%;
        border: none;
        border-right: 1px solid var(--input);
        background: var(--muted);
        color: var(--foreground);
        font-size: 0.875rem;
        font-weight: 500;
        font-family: var(--font-sans);
        padding: 0 0.75rem;
        margin-right: 0.75rem;
        cursor: pointer;
        transition: background 150ms;

        &:hover { background: var(--accent); }
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="sm"] { height: 2rem;    padding: 0 0.625rem; font-size: 0.8125rem; }
    &[data-size="lg"] { height: 2.75rem; padding: 0 1rem;     font-size: 1rem; }
  }

  /* -- Auto-growing textarea --------------------------------- */
  textarea.input {
    field-sizing: content;
    min-height: 5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  /* -- Field description ------------------------------------- */
  .field-description {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: 0.375rem 0 0;
  }

  /* -- Field error ------------------------------------------- */
  .field-error {
    font-size: 0.8125rem;
    color: var(--destructive);
    margin: 0.375rem 0 0;
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .input {
      transition: none;
    }

    .input[type="file"]::file-selector-button {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .input {
      border-width: 2px;
    }

    .input:disabled {
      opacity: 0.7;
    }
  }

  @media (forced-colors: active) {
    .input {
      border-color: ButtonBorder;
      color: ButtonText;
      background: Field;
    }

    .input:focus {
      outline: 2px solid Highlight;
      outline-offset: 1px;
    }

    .input:disabled {
      opacity: 1;
      color: GrayText;
      border-color: GrayText;
    }

    .input:is([aria-invalid="true"], :user-invalid) {
      border-color: LinkText;
    }

    .field-error {
      color: LinkText;
    }
  }
}


/* -- Label component -------------------------------------------- */

@layer components {
  .label {
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    line-height: 1;
    color: var(--foreground);
    display: block;
    margin-bottom: 0.375rem;
    cursor: default;

    /* Disabled — explicit attribute */
    &[data-disabled] {
      opacity: 0.7;
      cursor: not-allowed;
    }

    /* Disabled — auto-detect via adjacent disabled control */
    &:has(+ :disabled),
    &:has(+ [data-disabled]) {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }

  /* -- Hint text (optional, required indicators) ----------- */
  .label-hint {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-contrast: more) {
    .label[data-disabled],
    .label:has(+ :disabled),
    .label:has(+ [data-disabled]) {
      opacity: 0.85;
    }
  }

  @media (forced-colors: active) {
    .label {
      color: LinkText;
    }

    .label[data-disabled],
    .label:has(+ :disabled),
    .label:has(+ [data-disabled]) {
      opacity: 1;
      color: GrayText;
    }
  }
}


@layer components {
  .nav-menu-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
  .nav-menu-link, .nav-menu-trigger {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.5rem 0.75rem; border: none; border-radius: var(--radius-md);
    background: transparent; color: var(--foreground); font-size: 0.875rem; font-weight: 500;
    font-family: inherit; text-decoration: none; cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    outline: none;
    &:hover { background-color: var(--accent); color: var(--accent-foreground); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & svg { width: 0.875rem; height: 0.875rem; color: var(--muted-foreground); transition: transform 200ms ease; }
  }

  /* Rotate chevron when popover is open */
  .nav-menu-trigger:has(+ .nav-menu-content:popover-open) svg {
    transform: rotate(180deg);
  }

  .nav-menu-content {
    position: fixed; inset: auto;
    margin: 0; border: 1px solid var(--border); border-radius: var(--radius-xl);
    background-color: var(--popover); color: var(--popover-foreground);
    padding: 1rem; box-shadow: var(--shadow-md); min-width: 14rem;
    opacity: 0; transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease, display 150ms allow-discrete;

    /* -- Anchor positioning -- */
    top: anchor(bottom); left: anchor(left); margin-top: 4px;
    position-try-fallbacks: flip-block;

    &:popover-open { opacity: 1; transform: translateY(0); }
  }
  @starting-style { .nav-menu-content:popover-open { opacity: 0; transform: translateY(-4px); } }
  .nav-menu-content-link {
    display: block; padding: 0.5rem 0.75rem; border-radius: var(--radius-md);
    text-decoration: none; color: var(--foreground); font-size: 0.875rem;
    transition: background-color 150ms ease;
    &:hover { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & p { margin: 0.125rem 0 0; font-size: 0.75rem; color: var(--muted-foreground); font-weight: 400; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .nav-menu-link, .nav-menu-trigger,
    .nav-menu-content, .nav-menu-content-link {
      transition: none;
    }
    .nav-menu-trigger svg { transition: none; }
  }

  @media (forced-colors: active) {
    .nav-menu-content {
      border-color: ButtonText;
    }
  }
}


/* -- Number Input component ------------------------------------- */

@layer components {
  .number-input {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    box-shadow: var(--shadow-xs);
    overflow: hidden;

    & input {
      border: none;
      outline: none;
      background: transparent;
      height: 2.5rem;
      width: 4rem;
      text-align: center;
      font-size: 0.875rem;
      font-family: var(--font-sans);
      color: var(--foreground);
      -moz-appearance: textfield;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    & button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2.5rem;
      border: none;
      background: transparent;
      color: var(--muted-foreground);
      cursor: pointer;
      font-size: 1rem;
      font-family: var(--font-sans);
      transition: background 150ms, color 150ms;
      flex-shrink: 0;

      &:hover {
        background: var(--accent);
        color: var(--accent-foreground);
      }

      &:first-child {
        border-right: 1px solid var(--input);
      }

      &:last-child {
        border-left: 1px solid var(--input);
      }
    }

    &:focus-within {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }
  }
}


@layer components {
  .pagination { display: flex; justify-content: center; }
  .pagination-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
  .pagination-link, .pagination-prev, .pagination-next {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.25rem; height: 2.25rem; padding-inline: 0.5rem;
    border: 1px solid transparent; border-radius: var(--radius-md);
    font-size: 0.875rem; color: var(--foreground); text-decoration: none;
    cursor: pointer; outline: none;
    transition: background-color 150ms ease, border-color 150ms ease; gap: 0.25rem;
    &:hover { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & svg { width: 1rem; height: 1rem; flex-shrink: 0; }

    /* Disabled state for prev/next at boundaries */
    &[aria-disabled="true"], &.disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
  .pagination-prev, .pagination-next { padding-inline: 0.75rem; gap: 0.375rem; }
  .pagination-active { border-color: var(--border); background-color: var(--background); font-weight: 500; }
  .pagination-ellipsis {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; color: var(--muted-foreground);
    & span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .pagination-link, .pagination-prev, .pagination-next { transition: none; }
  }

  @media (prefers-contrast: more) {
    .pagination-link, .pagination-prev, .pagination-next {
      border-color: var(--border);
      &:hover { border-color: var(--foreground); }
    }
    .pagination-active { border-width: 2px; }
  }

  @media (forced-colors: active) {
    .pagination-active {
      border-color: Highlight;
    }
    .pagination-link, .pagination-prev, .pagination-next {
      &:hover { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    }
  }
}


@layer components {
  .popover {
    position: fixed;
    inset: auto;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background-color: var(--popover);
    color: var(--popover-foreground);
    padding: 1rem;
    box-shadow: var(--shadow-md);
    width: 20rem;
    opacity: 0;
    translate: 0 -4px;
    transition: opacity 150ms ease, translate 150ms ease, display 150ms allow-discrete;

    /* -- Default: bottom center -- */
    position-area: bottom;
    margin-top: 4px;
    position-try-fallbacks: flip-block;

    &:popover-open {
      opacity: 1;
      translate: 0 0;
    }

    /* ----- Side variants ----- */
    &[data-side="top"] {
      position-area: top;
      margin-top: 0;
      margin-bottom: 4px;
      translate: 0 4px;
      &:popover-open { translate: 0 0; }
    }

    &[data-side="left"] {
      position-area: left;
      margin-top: 0;
      margin-right: 4px;
      translate: 4px 0;
      position-try-fallbacks: flip-inline;
      &:popover-open { translate: 0 0; }
    }

    &[data-side="right"] {
      position-area: right;
      margin-top: 0;
      margin-left: 4px;
      translate: -4px 0;
      position-try-fallbacks: flip-inline;
      &:popover-open { translate: 0 0; }
    }

    /* ----- Align variants (combined with side) ----- */
    &[data-align="start"] {
      &:not([data-side="left"]):not([data-side="right"]) { position-area: bottom left; }
      &[data-side="top"] { position-area: top left; }
      &[data-side="left"] { position-area: left top; }
      &[data-side="right"] { position-area: right top; }
    }

    &[data-align="end"] {
      &:not([data-side="left"]):not([data-side="right"]) { position-area: bottom right; }
      &[data-side="top"] { position-area: top right; }
      &[data-side="left"] { position-area: left bottom; }
      &[data-side="right"] { position-area: right bottom; }
    }
  }

  @starting-style {
    .popover:popover-open { opacity: 0; translate: 0 -4px; }
    .popover[data-side="top"]:popover-open { opacity: 0; translate: 0 4px; }
    .popover[data-side="left"]:popover-open { opacity: 0; translate: 4px 0; }
    .popover[data-side="right"]:popover-open { opacity: 0; translate: -4px 0; }
  }

  .popover-header { margin-bottom: 0.75rem; }
  .popover-title { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
  .popover-description { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--muted-foreground); }
  .popover-content { font-size: 0.875rem; }

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


@layer components {
  .progress {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 0.5rem;
    border: none;
    border-radius: 9999px;
    overflow: hidden;
    background-color: var(--secondary);
  }

  /* WebKit (Chrome, Safari, Edge) */
  .progress::-webkit-progress-bar {
    background-color: var(--secondary);
    border-radius: 9999px;
  }

  .progress::-webkit-progress-value {
    background-color: var(--primary);
    border-radius: 9999px;
    transition: width 300ms ease;
  }

  /* Firefox */
  .progress::-moz-progress-bar {
    background-color: var(--primary);
    border-radius: 9999px;
  }

  /* Indeterminate state */
  .progress:indeterminate {
    background: linear-gradient(
      90deg,
      var(--secondary) 0%,
      var(--primary) 50%,
      var(--secondary) 100%
    );
    background-size: 200% 100%;
    animation: progress-indeterminate 1.5s linear infinite;
  }

  .progress:indeterminate::-webkit-progress-bar {
    background-color: transparent;
  }

  .progress:indeterminate::-moz-progress-bar {
    background-color: transparent;
  }

  @keyframes progress-indeterminate {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
}


/* -- Radio Group component -------------------------------------- */

@layer components {
  .radio-group {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & > legend {
      margin-bottom: 0.375rem;
    }

    /* Horizontal layout */
    &[data-orientation="horizontal"] {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1rem;
    }
  }

  .radio-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      font-weight: 400;
      cursor: pointer;
    }
  }

  /* -- With-description layout -------------------------------- */
  .radio-item-block {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.5rem;

    & > .radio {
      grid-row: 1 / 3;
      margin-top: 0.125rem;
    }

    & > label {
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      line-height: 1.4;
    }

    & > .radio-description {
      grid-column: 2;
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      line-height: 1.5;
    }
  }

  /* -- Card variant ------------------------------------------- */
  .radio-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color 150ms, background 150ms;

    &:hover {
      background: var(--accent);
    }

    &:has(.radio:checked) {
      border-color: var(--primary);
    }

    &:has(.radio:focus-visible) {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:has(.radio:disabled) {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }

    & > .radio {
      position: absolute;
      top: 1rem;
      right: 1rem;
    }

    & > label {
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
    }

    & > .radio-description {
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      line-height: 1.5;
    }
  }

  .radio {
    appearance: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--background);
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: border-color 150ms;

    &:checked {
      border-color: var(--primary);

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: var(--primary);
        transform: translate(-50%, -50%);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      & + label { opacity: 0.5; cursor: not-allowed; }
    }

    &[aria-invalid="true"] {
      border-color: var(--destructive);

      &:checked {
        border-color: var(--destructive);

        &::after {
          background: var(--destructive);
        }
      }
    }
  }

  /* Helper text for group-level descriptions */
  .radio-group-description {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: -0.125rem 0 0.25rem;
  }

  /* -- Accessibility ------------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .radio,
    .radio-card {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .radio {
      border-color: ButtonText;

      &:checked {
        border-color: Highlight;

        &::after {
          background: Highlight;
        }
      }

      &:disabled {
        border-color: GrayText;

        &:checked::after {
          background: GrayText;
        }
      }
    }

    .radio-card {
      border-color: ButtonText;

      &:has(.radio:checked) {
        border-color: Highlight;
      }
    }
  }
}


@layer components {
  .scroll-area {
    overflow: auto;
    position: relative;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    /* Webkit custom scrollbar */
    &::-webkit-scrollbar { width: 6px; height: 6px; }
    &::-webkit-scrollbar-track { background: transparent; }
    &::-webkit-scrollbar-thumb {
      background-color: var(--border);
      border-radius: 3px;
      &:hover { background-color: var(--muted-foreground); }
    }

    /* Standard scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
}


/* -- Select component ------------------------------------------- */

@layer components {
  .select {
    appearance: none;
    height: 2.5rem;
    width: 100%;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0 2rem 0 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: border-color 150ms, box-shadow 150ms;

    /* Custom chevron */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &:is([aria-invalid="true"], :user-invalid) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="sm"] { height: 2rem;    padding-left: 0.625rem; font-size: 0.8125rem; }
    &[data-size="lg"] { height: 2.75rem; padding-left: 1rem;     font-size: 1rem; }
  }
}


/* -- Separator component ---------------------------------------- */

@layer components {
  .separator {
    border: none;
    margin: 0;
    flex-shrink: 0;
    background: var(--border);

    /* Horizontal (default) */
    height: 1px;
    width: 100%;

    /* Vertical */
    &[data-orientation="vertical"] {
      height: auto;
      width: 1px;
      align-self: stretch;
    }

    /* Decorative — hidden from assistive technology */
    &[aria-hidden="true"],
    &[role="none"] {
      /* No visual change — purely semantic */
    }
  }

  /* -- Labeled separator ------------------------------------- */
  .separator-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    & .separator { flex: 1; }

    & span {
      font-size: 0.75rem;
      font-weight: 500;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
      flex-shrink: 0;
    }
  }

  /* -- Accessibility ----------------------------------------- */
  @media (forced-colors: active) {
    .separator {
      background: CanvasText;
    }
  }

  @media (prefers-contrast: more) {
    .separator {
      background: var(--foreground);
      height: 2px;

      &[data-orientation="vertical"] {
        width: 2px;
        height: auto;
      }
    }
  }
}


/* -- Sheet component ------------------------------------------- */

@layer components {
  /* -- Base -------------------------------------------------- */
  dialog.sheet {
    border: none;
    border-radius: 0;
    background-color: var(--background);
    color: var(--foreground);
    padding: 0;
    margin: 0;
    max-width: none;
    max-height: none;
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms ease, display 300ms allow-discrete;

    &[open] { opacity: 1; }

    /* -- Side: right (default) --------------------------------- */
    &, &[data-side="right"] {
      position: fixed;
      top: 0; right: 0; bottom: 0;
      left: auto;
      width: 24rem;
      max-width: 100vw;
      max-height: 100vh;
      height: 100%;
      border-left: 1px solid var(--border);
      transform: translateX(100%);
    }

    &[open], &[data-side="right"][open] {
      transform: translateX(0);
    }

    /* -- Side: left -------------------------------------------- */
    &[data-side="left"] {
      position: fixed;
      top: 0; left: 0; bottom: 0;
      right: auto;
      width: 24rem;
      max-width: 100vw;
      max-height: 100vh;
      height: 100%;
      border-left: none;
      border-right: 1px solid var(--border);
      transform: translateX(-100%);

      &[open] { transform: translateX(0); }
    }

    /* -- Side: top --------------------------------------------- */
    &[data-side="top"] {
      position: fixed;
      top: 0; left: 0; right: 0;
      bottom: auto;
      width: 100%;
      max-width: 100vw;
      max-height: 100vh;
      height: auto;
      border-left: none;
      border-bottom: 1px solid var(--border);
      transform: translateY(-100%);

      &[open] { transform: translateY(0); }
    }

    /* -- Side: bottom ------------------------------------------ */
    &[data-side="bottom"] {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      top: auto;
      width: 100%;
      max-width: 100vw;
      max-height: 100vh;
      height: auto;
      border-left: none;
      border-top: 1px solid var(--border);
      transform: translateY(100%);

      &[open] { transform: translateY(0); }
    }

    /* -- Backdrop ---------------------------------------------- */
    &::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
      transition: all 300ms ease, display 300ms allow-discrete;
    }

    &[open]::backdrop {
      background: oklch(0 0 0 / 0.45);
      backdrop-filter: blur(3px);
    }
  }

  @starting-style {
    dialog.sheet[open],
    dialog.sheet[data-side="right"][open] {
      opacity: 0;
      transform: translateX(100%);
    }

    dialog.sheet[data-side="left"][open] {
      opacity: 0;
      transform: translateX(-100%);
    }

    dialog.sheet[data-side="top"][open] {
      opacity: 0;
      transform: translateY(-100%);
    }

    dialog.sheet[data-side="bottom"][open] {
      opacity: 0;
      transform: translateY(100%);
    }

    dialog.sheet[open]::backdrop {
      background: oklch(0 0 0 / 0);
      backdrop-filter: blur(0px);
    }
  }

  /* -- Content sections -------------------------------------- */
  .sheet-content     { padding: 1.5rem; position: relative; }
  .sheet-header      { margin-bottom: 1rem; padding-right: 2rem; }
  .sheet-title       { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.375rem; letter-spacing: -0.01em; }
  .sheet-description { font-size: 0.875rem; color: var(--muted-foreground); margin: 0; line-height: 1.6; }
  .sheet-body        { margin-top: 1rem; }
  .sheet-footer      { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }

  /* -- Close button ------------------------------------------ */
  .sheet-close-x {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 1.75rem; height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 150ms, background-color 150ms;

    &:hover {
      color: var(--foreground);
      background-color: var(--accent);
    }
  }
}


/* -- Sidebar component ------------------------------------------ */
/* Application sidebar with collapsible state, mobile sheet overlay, */
/* collapsible groups, submenus, and keyboard shortcut (Cmd+B).      */

@layer components {

  /* ── Shell layout ─────────────────────────────────────────── */
  .sidebar-layout {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* ── Sidebar panel ────────────────────────────────────────── */
  .app-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width, 16rem);
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    background-color: var(--sidebar);
    border-right: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    transition: width 200ms ease;
    overflow: hidden;
    z-index: 30;

    /* Right side */
    &[data-side="right"] {
      border-right: none;
      border-left: 1px solid var(--sidebar-border);
      order: 1;
    }

    /* Collapsed — icon-only rail */
    &[data-state="collapsed"] {
      width: var(--sidebar-width-collapsed, 3.5rem);

      & .sidebar-link span,
      & .sidebar-section-title,
      & .sidebar-group-action,
      & .sidebar-badge,
      & .sidebar-footer,
      & .sidebar-logo-text { display: none; }

      & .sidebar-link { justify-content: center; padding: 0.5rem; }
      & .sidebar-header { justify-content: center; padding: 0.75rem 0.5rem; }
      & .sidebar-group > summary { justify-content: center; }
      & .sidebar-group > summary span { display: none; }
      & .sidebar-group > summary svg:last-child { display: none; }
    }

    /* Hidden on mobile by default — shown via dialog */
    @media (max-width: 767px) {
      display: none;
    }
  }

  /* ── Sidebar header ───────────────────────────────────────── */
  .sidebar-header {
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 0.5rem;
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
  }

  .sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sidebar-foreground);
    text-decoration: none;
  }

  /* ── Sidebar content (scrollable area) ────────────────────── */
  .sidebar-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem;
    gap: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-border) transparent;
  }

  /* ── Sidebar nav ──────────────────────────────────────────── */
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  /* ── Nav links ────────────────────────────────────────────── */
  .sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--sidebar-foreground);
    text-decoration: none;
    transition: background-color 150ms ease;
    position: relative;

    &:hover {
      background-color: var(--sidebar-accent);
      color: var(--sidebar-accent-foreground);
    }

    &[data-active="true"],
    &[aria-current="page"] {
      background-color: var(--sidebar-accent);
      color: var(--sidebar-accent-foreground);
      font-weight: 500;
    }

    &:focus-visible {
      outline: 2px solid var(--sidebar-ring);
      outline-offset: -2px;
    }

    & svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }
  }

  /* ── Menu badge ───────────────────────────────────────────── */
  .sidebar-badge {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    background-color: var(--sidebar-primary);
    color: var(--sidebar-primary-foreground);
    line-height: 1;
  }

  /* ── Section title ────────────────────────────────────────── */
  .sidebar-section-title {
    padding: 0.75rem 0.75rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
  }

  /* ── Collapsible group (uses <details>) ────────────────────── */
  .sidebar-group {
    & > summary {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      font-size: 0.6875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted-foreground);
      cursor: pointer;
      list-style: none;
      border-radius: var(--radius-md);
      transition: background-color 150ms ease;

      &:hover { background-color: var(--sidebar-accent); }
      &::-webkit-details-marker { display: none; }

      & svg:last-child {
        width: 0.875rem;
        height: 0.875rem;
        margin-left: auto;
        transition: rotate 200ms ease;
      }
    }

    &[open] > summary svg:last-child { rotate: 90deg; }
    & > .sidebar-nav { padding: 0.25rem 0 0.25rem 0.75rem; }
  }

  /* ── Submenu (nested <details>) ────────────────────────────── */
  .sidebar-submenu {
    & > summary {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      border-radius: var(--radius-md);
      font-size: 0.875rem;
      color: var(--sidebar-foreground);
      cursor: pointer;
      list-style: none;
      transition: background-color 150ms ease;

      &:hover {
        background-color: var(--sidebar-accent);
        color: var(--sidebar-accent-foreground);
      }
      &::-webkit-details-marker { display: none; }

      & svg:last-child {
        width: 0.875rem;
        height: 0.875rem;
        margin-left: auto;
        transition: rotate 200ms ease;
      }
    }

    &[open] > summary svg:last-child { rotate: 90deg; }

    & > .sidebar-nav {
      padding: 0.25rem 0 0.25rem 1.5rem;
      border-left: 1px solid var(--sidebar-border);
      margin-left: 0.75rem;
    }
  }

  /* ── Group action button ──────────────────────────────────── */
  .sidebar-group-action {
    margin-left: auto;
    padding: 0.125rem;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    border-radius: var(--radius-sm);

    &:hover { color: var(--sidebar-foreground); background-color: var(--sidebar-accent); }
    & svg { width: 0.875rem; height: 0.875rem; }
  }

  /* ── Sidebar footer ───────────────────────────────────────── */
  .sidebar-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--sidebar-border);
    font-size: 0.8125rem;
    color: var(--sidebar-foreground);
    flex-shrink: 0;
    & p { margin: 0; }
  }

  /* ── Sidebar trigger ──────────────────────────────────────── */
  .sidebar-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    border-radius: var(--radius-md);

    &:hover { background-color: var(--accent); }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
    & svg { width: 1rem; height: 1rem; }
  }

  /* ── Mobile sidebar (<dialog> sheet overlay) ──────────────── */
  .sidebar-mobile {
    border: none;
    padding: 0;
    margin: 0;
    position: fixed;
    inset: 0;
    width: var(--sidebar-width, 16rem);
    max-width: 80vw;
    height: 100%;
    background-color: var(--sidebar);
    color: var(--sidebar-foreground);
    z-index: 50;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    opacity: 0;
    translate: -100% 0;
    transition: opacity 200ms ease, translate 200ms ease,
                display 200ms allow-discrete;

    &[open] {
      opacity: 1;
      translate: 0 0;
    }

    &[data-side="right"] {
      right: 0;
      left: auto;
      translate: 100% 0;
      &[open] { translate: 0 0; }
    }

    &::backdrop {
      background: oklch(0 0 0 / 0.5);
      opacity: 0;
      transition: opacity 200ms ease, display 200ms allow-discrete;
    }

    &[open]::backdrop { opacity: 1; }

    & .sidebar-mobile-close {
      position: absolute;
      top: 0.75rem;
      right: 0.75rem;
      width: 1.5rem;
      height: 1.5rem;
      border: none;
      background: transparent;
      color: var(--sidebar-foreground);
      cursor: pointer;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover { background-color: var(--sidebar-accent); }
      & svg { width: 0.875rem; height: 0.875rem; }
    }

    @media (min-width: 768px) {
      display: none;
    }
  }

  @starting-style {
    .sidebar-mobile[open] { opacity: 0; translate: -100% 0; }
    .sidebar-mobile[open]::backdrop { opacity: 0; }
    .sidebar-mobile[data-side="right"][open] { opacity: 0; translate: 100% 0; }
  }

  /* ── Reduced motion ───────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .app-sidebar { transition: none; }
    .sidebar-link { transition: none; }
    .sidebar-group > summary svg:last-child { transition: none; }
    .sidebar-submenu > summary svg:last-child { transition: none; }
    .sidebar-mobile { transition: none; }
    .sidebar-mobile::backdrop { transition: none; }
  }
}


@layer components {
  .skeleton {
    background-color: var(--accent);
    border-radius: var(--radius-md);
    animation: skeleton-pulse 2s ease-in-out infinite;
  }

  .skeleton-round {
    border-radius: 9999px;
  }

  @keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }
}


/* -- Slider component ------------------------------------------- */

@layer components {
  .slider {
    --slider-value: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--secondary);
    cursor: pointer;
    outline: none;
    border: none;
    accent-color: var(--primary);

    /* Track — WebKit (filled via gradient) */
    &::-webkit-slider-runnable-track {
      height: 0.5rem;
      border-radius: 9999px;
      background: linear-gradient(
        to right,
        var(--primary) 0%,
        var(--primary) var(--slider-value),
        var(--secondary) var(--slider-value),
        var(--secondary) 100%
      );
    }

    /* Track — Firefox */
    &::-moz-range-track {
      height: 0.5rem;
      border-radius: 9999px;
      background: var(--secondary);
      border: none;
    }

    /* Filled portion — Firefox */
    &::-moz-range-progress {
      height: 0.5rem;
      border-radius: 9999px;
      background: var(--primary);
    }

    /* Thumb — WebKit */
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      background: var(--background);
      border: 2px solid var(--primary);
      margin-top: -0.375rem;
      cursor: pointer;
      transition: box-shadow 150ms, transform 150ms;
    }

    /* Thumb — Firefox */
    &::-moz-range-thumb {
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      background: var(--background);
      border: 2px solid var(--primary);
      cursor: pointer;
      transition: box-shadow 150ms, transform 150ms;
    }

    /* Hover */
    &:hover:not(:disabled) {
      &::-webkit-slider-thumb {
        box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 15%, transparent);
      }
      &::-moz-range-thumb {
        box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 15%, transparent);
      }
    }

    /* Focus */
    &:focus-visible {
      &::-webkit-slider-thumb {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
      &::-moz-range-thumb {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
    }

    /* Disabled */
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;

      &::-webkit-slider-thumb { cursor: not-allowed; }
      &::-moz-range-thumb { cursor: not-allowed; }
    }

    /* Vertical orientation */
    &[data-orientation="vertical"] {
      writing-mode: vertical-lr;
      direction: rtl;
      width: 0.5rem;
      height: 12rem;

      &::-webkit-slider-runnable-track {
        width: 0.5rem;
        background: linear-gradient(
          to top,
          var(--primary) 0%,
          var(--primary) var(--slider-value),
          var(--secondary) var(--slider-value),
          var(--secondary) 100%
        );
      }

      &::-webkit-slider-thumb {
        margin-top: 0;
        margin-left: -0.375rem;
      }
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .slider {
      &::-webkit-slider-thumb { transition: none; }
      &::-moz-range-thumb { transition: none; }
    }
  }

  /* High contrast */
  @media (prefers-contrast: more) {
    .slider {
      &::-webkit-slider-thumb {
        border-width: 3px;
      }
      &::-moz-range-thumb {
        border-width: 3px;
      }
    }
  }

  /* Forced colors (Windows High Contrast Mode) */
  @media (forced-colors: active) {
    .slider {
      &::-webkit-slider-runnable-track {
        background: ButtonFace;
        border: 1px solid ButtonText;
      }
      &::-moz-range-track {
        background: ButtonFace;
        border: 1px solid ButtonText;
      }
      &::-moz-range-progress {
        background: Highlight;
      }
      &::-webkit-slider-thumb {
        background: ButtonText;
        border-color: ButtonText;
      }
      &::-moz-range-thumb {
        background: ButtonText;
        border-color: ButtonText;
      }

      &:focus-visible {
        &::-webkit-slider-thumb {
          outline-color: Highlight;
        }
        &::-moz-range-thumb {
          outline-color: Highlight;
        }
      }
    }
  }
}


@layer components {
  .sortable {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    /* Horizontal orientation */
    &[data-orientation="horizontal"] {
      flex-direction: row;
      flex-wrap: wrap;
    }
  }

  .sortable-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--card);
    font-size: 0.875rem;
    color: var(--foreground);
    cursor: grab;
    transition: box-shadow 150ms ease, opacity 150ms ease, border-color 150ms ease;
    user-select: none;

    &:active { cursor: grabbing; }

    /* Keyboard focus (roving tabindex) */
    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    /* Active descendant highlight (keyboard navigation) */
    &[data-active] {
      border-color: var(--ring);
      background-color: var(--accent);
      color: var(--accent-foreground);
    }

    /* Drag in progress */
    &[data-dragging] {
      opacity: 0.5;
      box-shadow: var(--shadow-md);
      border-style: dashed;
    }

    /* Drop target indicator */
    &[data-over="before"] {
      border-top: 2px solid var(--primary);
    }
    &[data-over="after"] {
      border-bottom: 2px solid var(--primary);
    }

    /* Horizontal drop indicators */
    .sortable[data-orientation="horizontal"] &[data-over="before"] {
      border-top: 1px solid var(--border);
      border-inline-start: 2px solid var(--primary);
    }
    .sortable[data-orientation="horizontal"] &[data-over="after"] {
      border-bottom: 1px solid var(--border);
      border-inline-end: 2px solid var(--primary);
    }

    /* Disabled */
    &[aria-disabled="true"] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  .sortable-handle {
    color: var(--muted-foreground);
    cursor: grab;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;

    &:active { cursor: grabbing; }
    & svg { width: 1rem; height: 1rem; }
  }

  /* Live region for screen reader announcements */
  .sortable-live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

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

  @media (prefers-contrast: more) {
    .sortable-item {
      border-width: 2px;
      &[data-active] { outline: 2px solid LinkText; }
      &[data-over="before"] { border-top-width: 3px; }
      &[data-over="after"] { border-bottom-width: 3px; }
    }
  }

  @media (forced-colors: active) {
    .sortable-item {
      border-color: ButtonBorder;
      color: ButtonText;
      background-color: ButtonFace;
      &[data-active] { border-color: Highlight; color: HighlightText; }
      &[data-dragging] { border-color: GrayText; }
      &[data-over="before"] { border-top-color: Highlight; }
      &[data-over="after"] { border-bottom-color: Highlight; }
      &[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
    }
    .sortable-handle { color: GrayText; }
  }
}


@layer components {
  .spinner {
    width: 1rem;
    height: 1rem;
    animation: spinner-rotate 1s linear infinite;
    color: var(--muted-foreground);
    flex-shrink: 0;

    &[data-size="sm"] {
      width: 0.875rem;
      height: 0.875rem;
    }

    &[data-size="md"] {
      width: 1.25rem;
      height: 1.25rem;
    }

    &[data-size="lg"] {
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  @keyframes spinner-rotate {
    to { transform: rotate(360deg); }
  }
}


@layer components {
  .statistic {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .statistic-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-foreground);
    letter-spacing: 0.01em;
  }

  .statistic-value {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--foreground);
  }

  .statistic-description {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .statistic-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-weight: 500;

    & svg {
      width: 0.75rem;
      height: 0.75rem;
    }

    &[data-trend="up"] {
      color: #16a34a;
    }

    &[data-trend="down"] {
      color: #dc2626;
    }
  }
}


@layer components {
  .steps { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
  .step {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; position: relative; text-align: center;
    &:not(:last-child)::after { content: ''; position: absolute; top: 1rem; left: calc(50% + 1.25rem); right: calc(-50% + 1.25rem); height: 2px; background-color: var(--border); }
    &[data-status='complete']::after { background-color: var(--primary); }
    &[data-status='error']::after { background-color: var(--destructive); }
  }
  .step-indicator {
    display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
    border-radius: 9999px; font-size: 0.75rem; font-weight: 500;
    border: 2px solid var(--border); color: var(--muted-foreground); background-color: var(--background); position: relative; z-index: 1;
    .step[data-status='current'] & { border-color: var(--primary); color: var(--primary); }
    .step[data-status='complete'] & { border-color: var(--primary); background-color: var(--primary); color: var(--primary-foreground); }
    .step[data-status='error'] & { border-color: var(--destructive); background-color: var(--destructive); color: var(--destructive-foreground); }

    & svg { width: 0.875rem; height: 0.875rem; pointer-events: none; }
  }
  .step-content { display: flex; flex-direction: column; gap: 0.125rem; }
  .step-title { margin: 0; font-size: 0.8125rem; font-weight: 500; color: var(--foreground); }
  .step-description { margin: 0; font-size: 0.75rem; color: var(--muted-foreground); }

  /* -- Clickable steps ---------------------------------------- */
  .step[data-clickable] .step-indicator {
    cursor: pointer;
    &:hover { opacity: 0.85; }
  }

  /* -- Size variants ------------------------------------------ */
  .steps[data-size='sm'] {
    & .step:not(:last-child)::after { top: 0.75rem; left: calc(50% + 1rem); right: calc(-50% + 1rem); }
    & .step-indicator { width: 1.5rem; height: 1.5rem; font-size: 0.6875rem; }
    & .step-indicator svg { width: 0.75rem; height: 0.75rem; }
    & .step-title { font-size: 0.75rem; }
    & .step-description { font-size: 0.6875rem; }
    &[data-orientation='vertical'] .step:not(:last-child)::after { top: 1.75rem; left: 0.6875rem; height: calc(100% - 1.75rem); }
  }

  .steps[data-size='lg'] {
    & .step:not(:last-child)::after { top: 1.25rem; left: calc(50% + 1.5rem); right: calc(-50% + 1.5rem); }
    & .step-indicator { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
    & .step-indicator svg { width: 1rem; height: 1rem; }
    & .step-title { font-size: 0.9375rem; }
    & .step-description { font-size: 0.8125rem; }
    &[data-orientation='vertical'] .step:not(:last-child)::after { top: 2.75rem; left: 1.1875rem; height: calc(100% - 2.75rem); }
  }

  /* -- Vertical orientation ---------------------------------- */
  .steps[data-orientation="vertical"] {
    flex-direction: column;
    gap: 0;

    & .step {
      flex-direction: row;
      align-items: flex-start;
      text-align: left;
      padding-bottom: 1.5rem;

      &:not(:last-child)::after {
        top: 2.25rem;
        left: 0.9375rem;
        right: auto;
        width: 2px;
        height: calc(100% - 2.25rem);
      }
    }

    & .step-content { padding-top: 0.25rem; }
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .step-indicator,
    .step:not(:last-child)::after { transition: none; }
  }

  @media (prefers-contrast: more) {
    .step-indicator { border-width: 3px; }
    .step:not(:last-child)::after { height: 3px; }
    .steps[data-orientation="vertical"] .step:not(:last-child)::after { width: 3px; height: calc(100% - 2.25rem); }
  }

  @media (forced-colors: active) {
    .step-indicator {
      border-color: ButtonText;
      .step[data-status='current'] & { border-color: Highlight; color: Highlight; }
      .step[data-status='complete'] & { border-color: Highlight; background: Highlight; color: HighlightText; }
      .step[data-status='error'] & { border-color: Mark; background: Mark; color: MarkText; }
    }
    .step:not(:last-child)::after { background: ButtonText; }
    .step[data-status='complete']:not(:last-child)::after { background: Highlight; }
    .step[data-status='error']:not(:last-child)::after { background: Mark; }
  }
}


/* -- Switch component ------------------------------------------- */

@layer components {
  .switch {
    appearance: none;
    width: 2.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: var(--input);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background-color 150ms;
    border: none;
    outline: none;

    /* Thumb */
    &::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: calc(1.25rem - 4px);
      height: calc(1.25rem - 4px);
      border-radius: 50%;
      background: var(--background);
      transition: transform 150ms;
      box-shadow: 0 1px 2px oklch(0 0 0 / 0.15);
    }

    &:checked {
      background: var(--primary);

      &::after {
        transform: translateX(1rem);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &[aria-invalid="true"] {
      background: var(--destructive);

      &:checked {
        background: var(--destructive);
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="sm"] {
      width: 1.75rem;
      height: 1rem;

      &::after {
        width: calc(1rem - 4px);
        height: calc(1rem - 4px);
      }

      &:checked::after {
        transform: translateX(0.75rem);
      }
    }
  }

  /* -- Switch item layout ----------------------------------- */
  .switch-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    & > label {
      font-size: 0.875rem;
      cursor: pointer;
    }
  }

  /* With-description layout */
  .switch-item-block {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 0.75rem;
    align-items: center;

    & > .switch {
      grid-row: 1 / 3;
    }

    & > label {
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
    }

    & > .switch-description {
      font-size: 0.8125rem;
      color: var(--muted-foreground);
      line-height: 1.5;
    }
  }

  /* Label disabled styling via :has() */
  .switch-item:has(.switch:disabled),
  .switch-item-block:has(.switch:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .switch,
    .switch::after {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .switch {
      background: ButtonFace;
      border: 1px solid ButtonText;

      &::after {
        background: ButtonText;
        box-shadow: none;
      }

      &:checked {
        background: Highlight;
        border-color: Highlight;

        &::after {
          background: HighlightText;
        }
      }

      &:disabled {
        border-color: GrayText;

        &::after {
          background: GrayText;
        }
      }
    }
  }
}


@layer components {
  .table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    container-type: inline-size;
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
    caption-side: bottom;
  }

  .table-caption {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    text-align: center;
  }

  .table-head {
    padding: 0.75rem 1rem;
    font-weight: 500;
    color: var(--muted-foreground);
    background-color: var(--muted);
    white-space: nowrap;
    border-bottom: 1px solid var(--border);

    &:first-child {
      border-top-left-radius: var(--radius-lg);
    }

    &:last-child {
      border-top-right-radius: var(--radius-lg);
    }
  }

  .table-row {
    border-bottom: 1px solid var(--border);
    transition: background-color 150ms ease;

    &:last-child {
      border-bottom: none;
    }

    tbody &:hover {
      background-color: var(--muted);
    }
  }

  .table-cell {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: var(--foreground);
  }

  tfoot .table-row {
    background-color: var(--muted);
    border-top: 1px solid var(--border);
    font-weight: 500;
  }

  tfoot .table-cell:first-child {
    border-bottom-left-radius: var(--radius-lg);
  }

  tfoot .table-cell:last-child {
    border-bottom-right-radius: var(--radius-lg);
  }

  /* -- Container query: compact table in narrow containers -- */
  @container (max-width: 480px) {
    .table-head,
    .table-cell { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
  }
}


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

@layer components {
  /* -- Default (pill) variant ----------------------------------- */
  .tab-list {
    display: inline-flex;
    align-items: center;
    background: var(--muted);
    border-radius: var(--radius-lg);
    padding: 0.25rem;
    gap: 0.125rem;

    /* -- Line variant --------------------------------------------- */
    &[data-variant="line"] {
      background: transparent;
      border-radius: 0;
      padding: 0;
      gap: 0;
      border-bottom: 1px solid var(--border);

      & .tab-trigger {
        border-radius: 0;
        padding: 0.5rem 1rem;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;

        &[aria-selected="true"] {
          background: transparent;
          color: var(--foreground);
          border-bottom-color: var(--primary);
          box-shadow: none;
        }
      }
    }

    /* -- Vertical orientation ------------------------------------ */
    &[aria-orientation="vertical"] {
      flex-direction: column;
      width: auto;

      & .tab-trigger {
        justify-content: flex-start;
        width: 100%;
      }
    }
  }

  .tab-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: calc(var(--radius) * 0.6);
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
    outline: none;

    &[aria-selected="true"] {
      background: var(--background);
      color: var(--foreground);
      box-shadow: 0 1px 3px oklch(0 0 0 / 0.08), 0 0 0 1px var(--border);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }

  /* -- Vertical layout container ----------------------------- */
  .tabs:has(.tab-list[aria-orientation="vertical"]) {
    display: flex;
    gap: 1rem;
    align-items: flex-start;

    & > .tab-content {
      margin-top: 0;
      flex: 1;
    }
  }

  /* -- Panel ---------------------------------------------------- */
  .tab-content {
    margin-top: 0.75rem;

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &[hidden] { display: none; }
  }

  /* -- Accessibility ------------------------------------------ */

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

  @media (forced-colors: active) {
    .tab-trigger[aria-selected="true"] {
      border: 2px solid Highlight;
      box-shadow: none;
    }

    .tab-list[data-variant="line"] .tab-trigger[aria-selected="true"] {
      border: none;
      border-bottom: 2px solid Highlight;
    }
  }
}


/* -- Textarea component ----------------------------------------- */

@layer components {
  .textarea {
    width: 100%;
    min-height: 5rem;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--foreground);
    outline: none;
    box-shadow: var(--shadow-xs);
    transition: border-color 150ms, box-shadow 150ms;
    resize: vertical;
    field-sizing: content;

    &:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2);
    }

    &::placeholder { color: var(--muted-foreground); }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      resize: none;
    }

    &:is([aria-invalid="true"], :user-invalid) {
      border-color: var(--destructive);

      &:focus {
        border-color: var(--destructive);
        box-shadow: 0 0 0 2px oklch(from var(--destructive) l c h / 0.2);
      }
    }
  }

  /* -- Accessibility ---------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .textarea {
      transition: none;
    }
  }

  @media (prefers-contrast: more) {
    .textarea {
      border-width: 2px;
    }

    .textarea:disabled {
      opacity: 0.7;
    }
  }

  @media (forced-colors: active) {
    .textarea {
      border-color: ButtonBorder;
      color: ButtonText;
      background: Field;
    }

    .textarea:focus {
      outline: 2px solid Highlight;
      outline-offset: 1px;
    }

    .textarea:disabled {
      opacity: 1;
      color: GrayText;
      border-color: GrayText;
    }

    .textarea:is([aria-invalid="true"], :user-invalid) {
      border-color: LinkText;
    }
  }
}


@layer components {
  .timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .timeline-item {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.5rem;
    position: relative;

    /* Connector line */
    &::before {
      content: '';
      position: absolute;
      left: 0.3125rem;
      top: 1rem;
      bottom: 0;
      width: 1px;
      background-color: var(--border);
    }

    &:last-child::before {
      display: none;
    }

    &:last-child {
      padding-bottom: 0;
    }
  }

  .timeline-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background-color: var(--border);
    flex-shrink: 0;
    margin-top: 0.375rem;
    position: relative;
    z-index: 1;

    &[data-variant="active"] {
      background-color: var(--primary);
    }
  }

  .timeline-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
  }

  .timeline-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground);
    line-height: 1.4;
  }

  .timeline-description {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    line-height: 1.5;
  }

  .timeline-time {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    margin-top: 0.125rem;
  }
}


/* -- Toast component ------------------------------------------- */

@layer components {
  /* -- Container ------------------------------------------------ */
  .toast-container {
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    padding: 1rem;
    max-height: 100vh;
    pointer-events: none;

    &[data-position="bottom-right"] { bottom: 0; right: 0; }
    &[data-position="bottom-left"]  { bottom: 0; left: 0; }
    &[data-position="top-right"]    { top: 0; right: 0; flex-direction: column; }
    &[data-position="top-left"]     { top: 0; left: 0; flex-direction: column; }
    &[data-position="top-center"]   { top: 0; left: 50%; transform: translateX(-50%); flex-direction: column; align-items: center; }
    &[data-position="bottom-center"]{ bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; }
  }

  /* -- Toast ---------------------------------------------------- */
  .toast {
    background-color: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    min-width: 20rem;
    max-width: 26rem;
    box-shadow: 0 4px 16px oklch(0 0 0 / 0.12);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 200ms ease, transform 200ms ease;

    &:popover-open {
      opacity: 1;
      transform: translateY(0);
    }

    /* -- Variants ------------------------------------------------- */
    &[data-variant="destructive"] {
      background-color: var(--destructive);
      color: var(--destructive-foreground);
      border-color: var(--destructive);

      & .toast-description {
        color: var(--destructive-foreground);
        opacity: 0.85;
      }
    }

    /* -- Semantic variants (border + icon color) ----------------- */
    &[data-variant="success"] {
      border-color: oklch(0.65 0.2 145);

      & .toast-icon { color: oklch(0.65 0.2 145); }
    }

    &[data-variant="warning"] {
      border-color: oklch(0.75 0.18 75);

      & .toast-icon { color: oklch(0.75 0.18 75); }
    }

    &[data-variant="info"] {
      border-color: oklch(0.6 0.15 250);

      & .toast-icon { color: oklch(0.6 0.15 250); }
    }
  }

  @starting-style {
    .toast:popover-open {
      opacity: 0;
      transform: translateY(0.5rem);
    }
  }

  /* -- Inner elements ------------------------------------------- */
  .toast-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .toast-text {
    flex: 1;
    min-width: 0;
  }

  .toast-title {
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
  }

  .toast-description {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: 0.125rem 0 0;
    line-height: 1.5;
  }

  .toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: calc(var(--radius) * 0.5);
    transition: color 150ms, background 150ms;

    &:hover {
      color: var(--foreground);
      background: var(--accent);
    }
  }

  .toast-icon {
    flex-shrink: 0;
    margin-top: 0.125rem;
  }

  .toast-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
  }
}


/* -- Toggle component ------------------------------------------ */

@layer components {
  .toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
    outline: none;
    flex-shrink: 0;
    height: 2.25rem;
    padding: 0 0.5rem;
    min-width: 2.25rem;

    &:hover {
      background-color: var(--muted);
      color: var(--muted-foreground);
    }

    &[aria-pressed="true"] {
      background-color: var(--accent);
      color: var(--accent-foreground);

      &:hover {
        background-color: color-mix(in oklch, var(--accent) 85%, var(--foreground));
      }
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px;
    }

    &:disabled {
      pointer-events: none;
      opacity: 0.5;
    }

    & svg {
      pointer-events: none;
      flex-shrink: 0;

      &:not([class*="size-"]) { width: 1rem; height: 1rem; }
    }

    /* -- Variants -------------------------------------------- */
    &[data-variant="outline"] {
      border: 1px solid var(--input);
      background: transparent;
      box-shadow: var(--shadow-xs);

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }

      &[aria-pressed="true"] {
        background-color: var(--accent);
        color: var(--accent-foreground);

        &:hover {
          background-color: color-mix(in oklch, var(--accent) 85%, var(--foreground));
        }
      }
    }

    /* -- Sizes ----------------------------------------------- */
    &[data-size="sm"]  { height: 2rem;  padding: 0 0.375rem; min-width: 2rem; }
    &[data-size="lg"]  { height: 2.5rem; padding: 0 0.625rem; min-width: 2.5rem; }
  }

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

  @media (prefers-contrast: more) {
    .toggle {
      border: 2px solid transparent;

      &[data-variant="outline"] {
        border-color: var(--foreground);
      }

      &[aria-pressed="true"] {
        border-color: currentColor;
      }
    }
  }

  @media (forced-colors: active) {
    .toggle {
      border: 1px solid ButtonText;

      &[aria-pressed="true"] {
        background: Highlight;
        color: HighlightText;
      }

      &:disabled {
        border-color: GrayText;
        color: GrayText;
      }
    }
  }
}


/* -- Toggle Group component ------------------------------------- */

@layer components {
  .toggle-group {
    display: inline-flex;
    align-items: center;
    gap: 0.0625rem;

    /* -- Outline variant: propagate border + shadow to children -- */
    &[data-variant="outline"] > .toggle {
      border: 1px solid var(--input);
      background: transparent;
      box-shadow: var(--shadow-xs);

      &:hover {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }

      &[aria-pressed="true"] {
        background-color: var(--accent);
        color: var(--accent-foreground);
      }
    }

    /* Collapse double borders on connected outline items */
    &[data-variant="outline"]:not([data-spacing]) > .toggle:not(:first-child) {
      margin-inline-start: -1px;
    }

    &[data-variant="outline"]:not([data-spacing])[data-orientation="vertical"] > .toggle:not(:first-child) {
      margin-inline-start: 0;
      margin-block-start: -1px;
    }

    /* -- Sizes: propagate to child toggles ---------------------- */
    &[data-size="sm"] > .toggle {
      height: 2rem;
      padding: 0 0.375rem;
      min-width: 2rem;

      & svg { width: 0.875rem; height: 0.875rem; }
    }

    &[data-size="lg"] > .toggle {
      height: 2.5rem;
      padding: 0 0.625rem;
      min-width: 2.5rem;

      & svg { width: 1.125rem; height: 1.125rem; }
    }

    /* -- Vertical orientation ----------------------------------- */
    &[data-orientation="vertical"] {
      flex-direction: column;
    }

    /* -- Connected borders: merge adjacent toggle radii --------- */
    & > .toggle:not(:first-child) {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    & > .toggle:not(:last-child) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    &[data-orientation="vertical"] {
      & > .toggle:not(:first-child) {
        border-start-start-radius: 0;
        border-start-end-radius: 0;
        border-end-start-radius: var(--radius-md);
      }

      & > .toggle:not(:last-child) {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        border-start-end-radius: var(--radius-md);
      }
    }

    /* -- Spacing: adds gap and restores individual radii --------- */
    &[data-spacing] {
      gap: 0.25rem;

      & > .toggle {
        border-radius: var(--radius-md);
      }
    }

    /* -- Disabled group ----------------------------------------- */
    &[data-disabled] {
      pointer-events: none;

      & > .toggle {
        pointer-events: none;
        opacity: 0.5;
      }
    }
  }

  /* -- Accessibility -------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .toggle-group .toggle {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .toggle-group > .toggle {
      border-color: ButtonBorder;

      &[aria-pressed="true"] {
        background-color: Highlight;
        color: HighlightText;
        border-color: Highlight;
      }

      &:focus-visible {
        outline-color: Highlight;
      }
    }
  }
}


/* -- Toolbar component ------------------------------------------ */

@layer components {
  .toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--background);
    width: fit-content;

    /* Vertical separators stretch to fill toolbar height */
    & > .separator[data-orientation="vertical"] {
      align-self: stretch;
      height: auto;
      margin: 0.25rem 0.25rem;
    }

    /* Vertical toolbar */
    &[aria-orientation="vertical"] {
      flex-direction: column;

      & > .separator[data-orientation="horizontal"],
      & > .separator:not([data-orientation]) {
        height: 1px;
        width: 1.5rem;
        margin: 0.25rem 0;
      }
    }
  }

  @media (forced-colors: active) {
    .toolbar {
      border-color: ButtonText;
    }
  }
}


@layer components {
  .tooltip {
    position: fixed;
    inset: auto;
    margin: 0;
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--primary);
    color: var(--primary-foreground);
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    line-height: 1.4;
    box-shadow: var(--shadow-sm);
    pointer-events: none;
    max-width: 16rem;
    width: max-content;
    opacity: 0;
    transition: opacity 150ms ease, translate 150ms ease, display 150ms allow-discrete;

    /* -- Default: top center -- */
    position-area: top;
    margin-bottom: 6px;
    translate: 0 2px;
    position-try-fallbacks: flip-block, flip-inline;

    &:popover-open { opacity: 1; translate: 0 0; }

    /* ----- Side variants ----- */
    &[data-side="bottom"] {
      position-area: bottom;
      margin-bottom: 0;
      margin-top: 6px;
      translate: 0 -2px;
      &:popover-open { translate: 0 0; }
    }

    &[data-side="left"] {
      position-area: left;
      margin-bottom: 0;
      margin-right: 6px;
      translate: 2px 0;
      &:popover-open { translate: 0 0; }
    }

    &[data-side="right"] {
      position-area: right;
      margin-bottom: 0;
      margin-left: 6px;
      translate: -2px 0;
      &:popover-open { translate: 0 0; }
    }

    /* ----- Align variants (combined with side) ----- */
    &[data-align="start"] {
      &:not([data-side="left"]):not([data-side="right"]) { position-area: top left; }
      &[data-side="bottom"] { position-area: bottom left; }
      &[data-side="left"] { position-area: left top; }
      &[data-side="right"] { position-area: right top; }
    }

    &[data-align="end"] {
      &:not([data-side="left"]):not([data-side="right"]) { position-area: top right; }
      &[data-side="bottom"] { position-area: bottom right; }
      &[data-side="left"] { position-area: left bottom; }
      &[data-side="right"] { position-area: right bottom; }
    }

    /* ----- Arrow ----- */
    & [data-arrow] {
      position: absolute;
      width: 8px;
      height: 8px;
      background: inherit;
      rotate: 45deg;
      border: none;
    }

    /* Arrow placement — default (top side): arrow at bottom center */
    &:not([data-side]), &[data-side="top"] {
      & [data-arrow] { bottom: -4px; left: 50%; margin-left: -4px; }
    }
    &[data-side="bottom"] {
      & [data-arrow] { top: -4px; left: 50%; margin-left: -4px; }
    }
    &[data-side="left"] {
      & [data-arrow] { right: -4px; top: 50%; margin-top: -4px; }
    }
    &[data-side="right"] {
      & [data-arrow] { left: -4px; top: 50%; margin-top: -4px; }
    }
  }

  @starting-style {
    .tooltip:popover-open { opacity: 0; translate: 0 2px; }
    .tooltip[data-side="bottom"]:popover-open { opacity: 0; translate: 0 -2px; }
    .tooltip[data-side="left"]:popover-open { opacity: 0; translate: 2px 0; }
    .tooltip[data-side="right"]:popover-open { opacity: 0; translate: -2px 0; }
  }
}


@layer components {
  .tree {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
  }

  .tree-group {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.25rem;
  }

  .tree-item {
    padding: 0;
  }

  .tree-branch {
    border: none;

    & ::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 200ms ease, content-visibility 200ms allow-discrete;
    }

    &[open] ::details-content {
      block-size: auto;
    }
  }

  @starting-style {
    .tree-branch[open] ::details-content {
      block-size: 0;
    }
  }

  .tree-branch-trigger {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--foreground);
    list-style: none;

    &:hover {
      background-color: var(--accent);
    }

    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -2px;
    }

    &::-webkit-details-marker {
      display: none;
    }

    & svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
    }

    & svg:first-child {
      width: 0.875rem;
      height: 0.875rem;
      color: var(--muted-foreground);
      transition: transform 200ms ease;
    }
  }

  details[open] > .tree-branch-trigger > svg:first-child {
    transform: rotate(90deg);
  }

  .tree-leaf {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    padding-left: calc(0.5rem + 0.875rem + 0.375rem);
    border-radius: var(--radius-md);
    color: var(--foreground);
    cursor: default;

    &:hover {
      background-color: var(--accent);
    }

    & svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      color: var(--muted-foreground);
    }
  }
}


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

/* -- Base text ---------------------------------------------- */
/* Sets the default font size for the entire page.            */
/* All typography classes are sized relative to this baseline. */
@layer base {
  body {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

@layer components {
  /* -- Headings ---------------------------------------------- */
  .h1 {
    scroll-margin-top: 5rem;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
    color: var(--foreground);
  }

  .h2 {
    scroll-margin-top: 5rem;
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-wrap: balance;
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;

    &:first-child { margin-top: 0; }
  }

  .h3 {
    scroll-margin-top: 5rem;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-wrap: balance;
    color: var(--foreground);
  }

  .h4 {
    scroll-margin-top: 5rem;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    text-wrap: balance;
    color: var(--foreground);
  }

  /* -- Paragraph --------------------------------------------- */
  .p {
    font-size: 0.875rem;
    line-height: 1.75;
    text-wrap: pretty;
    color: var(--foreground);

    &:not(:first-child) { margin-top: 1.5rem; }
  }

  /* -- Lead --------------------------------------------------- */
  .lead {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--muted-foreground);
    text-wrap: pretty;
  }

  /* -- Large -------------------------------------------------- */
  .large {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--foreground);
  }

  /* -- Small -------------------------------------------------- */
  .small {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--foreground);
  }

  /* -- Muted -------------------------------------------------- */
  .muted {
    font-size: 0.875rem;
    color: var(--muted-foreground);
  }

  /* -- Blockquote --------------------------------------------- */
  .blockquote {
    margin-top: 1.5rem;
    border-inline-start: 2px solid var(--border);
    padding-inline-start: 1.5rem;
    font-style: italic;
    hanging-punctuation: first last;
    color: var(--foreground);

    & p { margin: 0; }
  }

  /* -- Inline code -------------------------------------------- */
  .code {
    position: relative;
    border-radius: var(--radius-sm);
    background: var(--muted);
    padding: 0.2rem 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.875em;
    font-weight: 600;
    color: var(--foreground);
  }

  /* -- Accessibility ------------------------------------------ */

  @media (prefers-contrast: more) {
    .h1, .h2, .h3, .h4 {
      letter-spacing: 0;
    }

    .blockquote {
      border-inline-start-width: 3px;
    }

    .code {
      outline: 1px solid var(--border);
    }

    .muted {
      color: var(--foreground);
    }
  }

  @media (forced-colors: active) {
    .blockquote {
      border-inline-start-color: CanvasText;
    }

    .code {
      background: Canvas;
      outline: 1px solid CanvasText;
      color: CanvasText;
    }
  }
}