/**
 * hx-accordion.css — Accordion SSOT
 * Aligned to the app styles that rendered correctly.
 * Token-driven. Fixed width. Left-aligned. No expand jump.
 */

.hx-accordion {
  background: var(--hx-surface);
  color: var(--hx-fg);
  border: 0;
  border-radius: var(--hx-radius);
  width: 100%;
  width: 480px;
  max-width: 100%;
  min-width: 480px;
  box-sizing: border-box;
}

.hx-accordion__item {
  border-bottom: 1px solid var(--hx-line);
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.hx-accordion__item:last-child {
  border-bottom: none;
}

.hx-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  width: 100%;
  padding: var(--spacing-3) 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  text-align: left;
}

.hx-accordion__label {
  flex: 1;
  text-align: left;
  font-weight: var(--font-weight-medium);
  min-width: 0;
}

.hx-accordion__chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.hx-accordion__panel,
.hx-accordion__content {
  padding: 0 0 var(--spacing-2);
  margin: 0;
  font-size: 14px;
  color: var(--hx-fg-muted);
  text-align: left;
}

.hx-accordion__item.is-open .hx-accordion__chevron {
  transform: rotate(180deg);
}

html[data-theme="dark"] .hx-accordion,
[data-theme="dark"] .hx-accordion {
  background: var(--hx-surface);
  color: var(--hx-fg);
}

/* Fixed width — same collapsed or expanded */
.hx-accordion {
  width: 480px;
  max-width: 100%;
  min-width: 280px;
  box-sizing: border-box;
}
.hx-accordion__item,
.hx-accordion__trigger,
.hx-accordion__panel {
  width: 100%;
  box-sizing: border-box;
}

/* Accordion — Controlled: mobile layout */
@media (max-width: 767px) {
  .hx-acc-controlled__bar {
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }
  .hx-acc-controlled {
    width: 100%;
    max-width: 100%;
  }
  .hx-accordion {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .hx-acc-controlled,
  .hx-acc-controlled .hx-accordion,
  .hx-accordion {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* Controlled + all accordions: no fixed min-width on mobile */
@media (max-width: 900px) {
  .hx-accordion,
  .hx-acc-controlled,
  .hx-acc-controlled .hx-accordion {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .hx-acc-controlled {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .hx-acc-controlled .hx-accordion,
  .hx-acc-controlled .hx-accordion__item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* Controlled wrapper — force full width on small viewports */
@media (max-width: 900px) {
  .hx-acc-controlled,
  div.hx-acc-controlled,
  .hx-preview-card__stage .hx-acc-controlled,
  .hx-example__stage .hx-acc-controlled {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* FAQ label 14px */
.hx-accordion--faq .hx-accordion__label,
.hx-accordion.hx-accordion--faq .hx-accordion__trigger,
[class*="faq"] .hx-accordion__label {
  font-size: 14px;
}

/* Controlled — definitive mobile override */
@media (max-width: 900px) {
  .hx-acc-controlled,
  .hx-preview-card__stage .hx-acc-controlled,
  .hx-example__stage .hx-acc-controlled,
  .hx-acc-controlled .hx-accordion {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* FAQ label 14px — the FAQ example uses hx-accordion--dividers */
.hx-accordion--dividers .hx-accordion__label,
.hx-accordion--dividers .hx-accordion__trigger {
  font-size: 14px;
}

/* Full width when the preview is in mobile density, regardless of browser width */
[data-hx-vp="mobile"] .hx-acc-controlled,
[data-hx-vp="mobile"] .hx-accordion,
.hx-example[data-hx-vp="mobile"] .hx-acc-controlled,
.hx-preview-card[data-hx-vp="mobile"] .hx-acc-controlled,
html[data-hx-vp="mobile"] .hx-acc-controlled,
.is-mobile-vp .hx-acc-controlled,
.is-mobile-vp .hx-accordion {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Mobile density — override fixed width */
[data-hx-vp="mobile"] .hx-accordion,
[data-hx-vp="mobile"] .hx-acc-controlled,
html[data-hx-vp="mobile"] .hx-accordion,
.is-mobile-vp .hx-accordion {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}


/* Migrated from helix-app.css */
.hx-accordion__item { border-bottom: 1px solid var(--hx-line); }
.hx-accordion__trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 0; cursor: pointer; font-weight: 600; }
.hx-accordion__panel { padding: 0; font-size: 14px; color: var(--hx-fg-muted); }
.hx-accordion__summary { display: flex; gap: 8px; font-size: 12px; color: var(--hx-fg-muted); }
.hx-accordion__chevron, .hx-accordion__chevron svg { width: 16px; height: 16px; }
.hx-accordion__panel { padding: 0; margin-top: 0; }
.hx-accordion__item { padding-bottom: 0; }
.hx-accordion__trigger { gap: 8px; }
.hx-acc-controlled__bar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.hx-acc-controlled__bar button { border: 0; background: transparent; font: inherit; cursor: pointer; }
.hx-accordion__panel {
  padding-bottom: var(--spacing-2);
}