/**
 * hx-dropdown.css — Dropdown SSOT
 */
.hx-dropdown {
  position: relative;
  display: inline-block;
}
.hx-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: var(--hx-surface);
  border: 0;
  border-radius: var(--hx-radius);
  box-shadow: none;
  z-index: var(--hx-z-dropdown);
}
.hx-dropdown__item {
  display: block;
  padding: var(--hx-space-2) var(--hx-space-3);
  color: var(--hx-fg);
}
.hx-dropdown__item:hover {
  background: var(--hx-surface-subtle);
}


/* 3.04.94 — 4-variant readiness (light/dark × desktop/mobile)
   Controlled by data-theme + data-hx-vp on <html>.
   All styles token-driven. Composition with other primitives encouraged. */
html[data-theme="light"][data-hx-vp="desktop"],
html[data-theme="light"][data-hx-vp="mobile"],
html[data-theme="dark"][data-hx-vp="desktop"],
html[data-theme="dark"][data-hx-vp="mobile"] {
  /* tokens flip automatically */
}

.hx-dropdown__menu,
.hx-preview-card__stage:has(.hx-dropdown) {
  overflow: visible;
}
.hx-dropdown__subwrap {
  position: relative;
}
.hx-dropdown__flyout {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 160px;
  margin: 0;
  display: none;
  background: var(--hx-surface);
  border: 0;
  border-radius: var(--radius-element);
  box-shadow: var(--shadow-med);
  z-index: 40;
}
.hx-dropdown__subwrap.is-open > .hx-dropdown__flyout {
  display: block;
}

.hx-dropdown__subwrap.is-open > .hx-dropdown__flyout {
  left: 100%;
  width: max-content;
  min-width: 160px;
  overflow: visible;
}
.hx-dropdown__menu,
.hx-dropdown__subwrap,
.hx-preview-card__stage:has(.hx-dropdown) {
  overflow: visible;
}

/* Dropdown above preview boxes — different approach */
.hx-preview-card__stage:has(.hx-dropdown),
.hx-preview-card:has(.hx-dropdown),
.hx-example__stage:has(.hx-dropdown) {
  overflow: visible;
  isolation: auto;
  z-index: 10;
}
.hx-dropdown.is-open,
.hx-dropdown[open],
.hx-dropdown:focus-within {
  z-index: calc(var(--hx-z-dropdown) + 1);
  position: relative;
}
.hx-dropdown__menu {
  z-index: calc(var(--hx-z-dropdown) + 2);
}

/* Submenu flyout — ensure it shows */
.hx-dropdown__subwrap {
  position: relative;
}
.hx-dropdown__flyout {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 160px;
  background: var(--hx-surface);
  border: 0;
  border-radius: var(--radius-inner);
  box-shadow: none;
  z-index: calc(var(--hx-z-dropdown) + 3);
  display: none;
}
.hx-dropdown__subwrap.is-open > .hx-dropdown__flyout,
.hx-dropdown__subwrap:hover > .hx-dropdown__flyout,
.hx-dropdown__item--sub:focus + .hx-dropdown__flyout {
  display: block;
}

/* Dark: default text and icons charcoal */
html[data-theme="dark"] .hx-dropdown__item,
html[data-theme="dark"] .hx-dropdown__trigger,
html[data-theme="dark"] .hx-dropdown__icon,
html[data-theme="dark"] .hx-dropdown__caret,
[data-theme="dark"] .hx-dropdown__item,
[data-theme="dark"] .hx-dropdown__trigger {
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-dropdown__menu,
[data-theme="dark"] .hx-dropdown__menu,
html[data-theme="dark"] .hx-app .hx-dropdown__menu,
html[data-theme="dark"] .hx-dropdown__flyout {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}

/* Preview stage corners — ensure consistent radius */
.hx-preview-card__stage.hx-example__stage {
  border-radius: var(--radius-inner);
  overflow: visible;
}

/* Beat helix-app .hx-dropdown__flyout { display: none } and [hidden] */
.hx-dropdown__subwrap.is-open > .hx-dropdown__flyout,
.hx-dropdown__subwrap:hover > .hx-dropdown__flyout,
.hx-dropdown__subwrap:focus-within > .hx-dropdown__flyout,
.hx-app .hx-dropdown__subwrap.is-open > .hx-dropdown__flyout,
.hx-app .hx-dropdown__subwrap:hover > .hx-dropdown__flyout,
.hx-example .hx-dropdown__subwrap.is-open > .hx-dropdown__flyout,
.hx-example .hx-dropdown__subwrap:hover > .hx-dropdown__flyout,
.hx-preview-card__stage .hx-dropdown__subwrap.is-open > .hx-dropdown__flyout,
.hx-preview-card__stage .hx-dropdown__subwrap:hover > .hx-dropdown__flyout {
  display: block;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Ensure hidden attribute does not force none when open */
.hx-dropdown__subwrap.is-open > .hx-dropdown__flyout[hidden],
.hx-dropdown__subwrap:hover > .hx-dropdown__flyout[hidden] {
  display: block;
}

/* Dark: force charcoal on text and icons */
html[data-theme="dark"] .hx-dropdown__item,
html[data-theme="dark"] .hx-dropdown__item *,
html[data-theme="dark"] .hx-dropdown__icon,
html[data-theme="dark"] .hx-dropdown__icon svg,
html[data-theme="dark"] .hx-dropdown__caret,
html[data-theme="dark"] .hx-dropdown__trigger,
[data-theme="dark"] .hx-dropdown__item,
[data-theme="dark"] .hx-dropdown__icon {
  color: var(--hx-fg);
  fill: none;
}

/* Definitive flyout ownership — beats helix-app display:none */
.hx-dropdown__flyout {
  display: none;
}
.hx-dropdown__subwrap.is-open > .hx-dropdown__flyout,
.hx-dropdown__subwrap.is-open > .hx-dropdown__flyout:not([hidden]),
.hx-app .hx-dropdown__subwrap.is-open > .hx-dropdown__flyout,
.hx-example .hx-dropdown__subwrap.is-open > .hx-dropdown__flyout,
.hx-preview-card__stage .hx-dropdown__subwrap.is-open > .hx-dropdown__flyout {
  display: block; /* temporary to confirm; will remove after verification */
  position: absolute;
  left: 100%;
  top: 0;
  z-index: calc(var(--hx-z-dropdown) + 5);
  background: var(--hx-surface);
  border: 0;
  border-radius: var(--radius-inner);
  min-width: 160px;
  box-shadow: var(--shadow-md);
}

/* Different approach: pure CSS hover/focus-within, ignore [hidden] */
.hx-dropdown__subwrap {
  position: relative;
}
.hx-dropdown__flyout {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 180px;
  background: var(--hx-surface);
  border: 0;
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-md);
  z-index: calc(var(--hx-z-dropdown) + 10);
  padding: var(--spacing-1) 0;
}
.hx-dropdown__subwrap:hover > .hx-dropdown__flyout,
.hx-dropdown__subwrap:focus-within > .hx-dropdown__flyout,
.hx-dropdown__item--sub:hover + .hx-dropdown__flyout,
.hx-dropdown__item--sub:focus + .hx-dropdown__flyout {
  display: block;
}
/* Override any [hidden] when hovered */
.hx-dropdown__subwrap:hover > .hx-dropdown__flyout[hidden],
.hx-dropdown__subwrap:focus-within > .hx-dropdown__flyout[hidden] {
  display: block;
}

/* Different approach — data-open + absolute, no [hidden] dependency */
.hx-dropdown__subwrap[data-open="true"] > .hx-dropdown__flyout,
.hx-dropdown__subwrap.is-open > .hx-dropdown__flyout,
.hx-dropdown__subwrap:hover > .hx-dropdown__flyout {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 180px;
  background: var(--hx-surface);
  color: var(--hx-fg);
  border: 0;
  border-radius: var(--radius-inner);
  box-shadow: var(--shadow-md);
  z-index: 9999;
  padding: var(--spacing-1) 0;
  visibility: visible;
  opacity: 1;
}

/* Ensure parent menus don't clip */
.hx-dropdown__menu,
.hx-dropdown.is-open .hx-dropdown__menu,
.hx-preview-card__stage:has(.hx-dropdown) {
  overflow: visible;
}

/* Force no border on menu — elevation only */
.hx-dropdown__menu,
.hx-dropdown__flyout,
.hx-app .hx-dropdown__menu,
.hx-app .hx-dropdown__flyout,
.hx-preview-card__stage .hx-dropdown__menu {
  border: 0;
  border-width: 0;
  outline: 0;
  box-shadow: none;
}

/* Visible elevation — no border */
.hx-dropdown__menu,
.hx-dropdown__flyout {
  border: 0;
  box-shadow: var(--shadow-lg);
}

/* Shadow sits outside where the border was */
.hx-dropdown__menu,
.hx-dropdown__flyout {
  border: 0;
  box-shadow: none;
}

/* Menu list — clean, no elevation */
.hx-dropdown__menu {
  box-shadow: none;
  border: 0;
}

/* Outer elevation on menu */
.hx-dropdown__menu,
.hx-dropdown__flyout {
  box-shadow: var(--shadow-lg);
  border: 0;
}

/* Final: outer elevation wins */
.hx-example .hx-dropdown__menu,
.hx-preview-card__stage .hx-dropdown__menu,
.hx-dropdown[data-hx-dropdown] > .hx-dropdown__menu,
.hx-dropdown__menu {
  box-shadow: var(--shadow-lg);
  border: 0;
}

/* Shadow only on the menu panel, below it — not on items */
.hx-dropdown__menu {
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  border: 0;
}
.hx-dropdown__item,
.hx-dropdown__menu > li {
  box-shadow: none;
}

/* Final: shadow only on menu panel, overflow visible so it shows below */
.hx-dropdown__menu {
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  overflow: visible;
  border: 0;
}
.hx-dropdown__item,
button.hx-dropdown__item,
.hx-dropdown__menu > li {
  box-shadow: none;
}

/* Force outer shadow on the menu panel only */
.hx-dropdown__menu,
.hx-example .hx-dropdown__menu,
.hx-preview-card__stage .hx-dropdown__menu,
.hx-dropdown[data-hx-dropdown] > .hx-dropdown__menu {
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  overflow: visible;
  border: 0;
}
.hx-dropdown__item,
button.hx-dropdown__item,
a.hx-dropdown__item,
.hx-dropdown__menu > li,
.hx-dropdown__menu > li > * {
  box-shadow: none;
}

/* Stage corners — clip background to radius, let dropdown escape */
.hx-preview-card__stage.hx-example__stage {
  border-radius: var(--radius-inner);
  overflow: hidden;
}
.hx-preview-card__stage.hx-example__stage:has(.hx-dropdown.is-open),
.hx-preview-card__stage.hx-example__stage:has(.hx-dropdown:focus-within) {
  overflow: visible;
}

/* Reinforce stage clip */
.hx-preview-card__stage.hx-example__stage {
  overflow: hidden;
  border-radius: var(--radius-inner);
}

/* Stage fill must clip to its own radius */
.hx-preview-card__stage.hx-example__stage {
  overflow: hidden;
  border-radius: var(--radius-inner);
  background-clip: padding-box;
}
.hx-preview-card.hx-example {
  overflow: hidden;
  border-radius: var(--radius-inner);
}

/* Dropdown trigger button font in Dark = charcoal-brand */
html[data-theme="dark"] .hx-dropdown__trigger,
html[data-theme="dark"] .hx-dropdown__trigger button,
html[data-theme="dark"] .hx-app .hx-dropdown__trigger,
html[data-theme="dark"] .hx-app .hx-dropdown__trigger * {
  color: var(--hx-fg);
}

/* Dropdown menu in Dark — light surface so charcoal-brand text is visible */
html[data-theme="dark"] .hx-dropdown__menu,
html[data-theme="dark"] .hx-dropdown__flyout,
html[data-theme="dark"] .hx-app .hx-dropdown__menu,
html[data-theme="dark"] .hx-app .hx-dropdown__flyout {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-dropdown__item,
html[data-theme="dark"] .hx-dropdown__item *,
html[data-theme="dark"] .hx-app .hx-dropdown__item {
  color: var(--hx-fg);
}

/* Dropdown Dark — menu visible (sand-brand bg + charcoal text), trigger charcoal */
html[data-theme="dark"] .hx-dropdown.is-open > .hx-dropdown__menu,
html[data-theme="dark"] .hx-dropdown.is-open .hx-dropdown__menu,
html[data-theme="dark"] .hx-app .hx-dropdown.is-open > .hx-dropdown__menu,
html[data-theme="dark"] .hx-preview-card__stage .hx-dropdown.is-open > .hx-dropdown__menu,
html[data-theme="dark"] .hx-dropdown__menu,
html[data-theme="dark"] .hx-dropdown__flyout {
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
  display: block;
}
html[data-theme="dark"] .hx-dropdown__trigger,
html[data-theme="dark"] .hx-dropdown__trigger.ws-button,
html[data-theme="dark"] .hx-app .hx-dropdown__trigger,
html[data-theme="dark"] .hx-dropdown__trigger .hx-btn__label,
html[data-theme="dark"] .hx-dropdown__trigger .hx-dropdown__icon,
html[data-theme="dark"] .hx-dropdown__trigger svg {
  color: var(--hx-fg);
  stroke: var(--hx-fg);
}
html[data-theme="dark"] .hx-dropdown__item,
html[data-theme="dark"] .hx-dropdown__item *,
html[data-theme="dark"] .hx-dropdown__label {
  color: var(--hx-fg);
}

/* Dropdown Dark — force open menu visible (override [hidden] + dark surface) */
html[data-theme="dark"] .hx-dropdown.is-open > .hx-dropdown__menu,
html[data-theme="dark"] .hx-dropdown.is-open > .hx-dropdown__menu[hidden],
html[data-theme="dark"] .hx-app .hx-dropdown.is-open > .hx-dropdown__menu,
html[data-theme="dark"] .hx-preview-card__stage .hx-dropdown.is-open > .hx-dropdown__menu,
html[data-theme="dark"] .hx-dropdown.is-open .hx-dropdown__menu {
  display: block;
  visibility: visible;
  opacity: 1;
  background: var(--hx-surface-subtle);
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-dropdown__trigger,
html[data-theme="dark"] .hx-dropdown__trigger.ws-button,
html[data-theme="dark"] .hx-app .hx-dropdown__trigger.ws-button,
html[data-theme="dark"] .hx-dropdown__trigger .hx-btn__label {
  color: var(--hx-fg);
}
html[data-theme="dark"] .hx-dropdown__item,
html[data-theme="dark"] .hx-dropdown__item * {
  color: var(--hx-fg);
}

/* Dropdown Dark — icons stay stroke-only */
html[data-theme="dark"] .hx-dropdown__icon svg,
html[data-theme="dark"] .hx-dropdown__icon svg path,
html[data-theme="dark"] .hx-dropdown__caret svg,
html[data-theme="dark"] .hx-dropdown__caret svg path,
html[data-theme="dark"] .hx-dropdown__trigger svg,
html[data-theme="dark"] .hx-dropdown__trigger svg path,
html[data-theme="dark"] .hx-dropdown__item svg,
html[data-theme="dark"] .hx-dropdown__item svg path {
  fill: none;
  stroke: currentColor;
  color: var(--hx-fg);
}