/* carousel primitive */

/* Carousel — mobile + dark */
@media (max-width: 767px) {
  .hx-carousel__slide {
    min-width: 85%;
  }
  .hx-carousel__nav {
    display: none;
  }
}
html[data-theme="dark"] .hx-carousel,
[data-theme="dark"] .hx-carousel {
  background: var(--hx-surface);
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-carousel__nav button,
[data-theme="dark"] .hx-carousel__nav button {
  background: var(--color-charcoal);
  color: var(--color-white);
}

/* Dark chevron visible */
html[data-theme="dark"] .hx-carousel__nav button,
html[data-theme="dark"] .hx-carousel__nav svg,
[data-theme="dark"] .hx-carousel__nav button,
[data-theme="dark"] .hx-carousel__float,
[data-theme="dark"] .hx-carousel__float svg {
  color: var(--color-white);
  fill: var(--color-white);
  stroke: var(--color-white);
  background: var(--color-charcoal);
}

/* Mobile: start left, not out of view */
@media (max-width: 767px) {
  .hx-carousel {
    padding-left: 0;
    margin-left: 0;
  }
  .hx-carousel__track,
  .hx-carousel__slides {
    justify-content: flex-start;
    scroll-padding-left: 0;
  }
  .hx-carousel__slide:first-child {
    margin-left: 0;
  }
}

/* Workflow cards full-width under mobile density */
[data-hx-vp="mobile"] .hx-carousel,
html[data-hx-vp="mobile"] .hx-carousel,
.is-mobile-vp .hx-carousel {
  width: 100%;
  max-width: 100%;
}
[data-hx-vp="mobile"] .hx-carousel__slide,
[data-hx-vp="mobile"] .hx-carousel__slide .hx-card,
html[data-hx-vp="mobile"] .hx-carousel__slide,
.is-mobile-vp .hx-carousel__slide {
  min-width: 100%;
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}


/* Migrated from helix-app.css */
.hx-carousel { display: flex; align-items: center; gap: 8px; }
.hx-carousel__view { min-width: 180px; text-align: center; font-weight: 600; }
.hx-carousel__slide { display: none; }
.hx-carousel__slide.is-current { display: block; }
.hx-carousel__nav { border: 0; background: transparent; width: 28px; height: 28px; }
.hx-carousel { display: block; max-width: 500px; }