/* Dropdown shared by the demos; each site sets its own look with the --cs-* values */
.cs { position: relative; width: 100%; min-width: 0; }
.cs__native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.cs__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-width: 0; height: var(--cs-h, 50px); padding: var(--cs-pad, 0 16px);
  background: var(--cs-field, transparent); color: inherit; font: inherit; font-size: var(--cs-size, 16px); text-align: left;
  border: 0; border-radius: var(--cs-radius, 0); box-shadow: var(--cs-field-line, none); border-bottom: var(--cs-under, 0);
  cursor: pointer; transition: box-shadow .2s, border-color .2s, background .2s;
}
.cs__val { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cs__btn::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: -4px 3px 0 0;
  border: solid var(--cs-accent, currentColor); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
  transition: transform .25s, margin .25s;
}
.cs.is-open .cs__btn::after { transform: rotate(225deg); margin-top: 4px; }
.cs__btn:focus-visible { outline: 2px solid var(--cs-accent, currentColor); outline-offset: 2px; }
.cs.is-open .cs__btn { box-shadow: var(--cs-open-line, var(--cs-field-line, none)); border-bottom-color: var(--cs-accent, currentColor); }
.cs__btn[aria-invalid="true"] { border-bottom-color: #E07A5F; }
.cs__list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  max-height: min(280px, 46vh); margin: 0; padding: var(--cs-list-pad, 6px); list-style: none; overflow-y: auto; overscroll-behavior: contain;
  background: var(--cs-bg, #fff); color: var(--cs-ink, inherit);
  border: var(--cs-border, 1px solid rgba(0, 0, 0, .12)); border-radius: var(--cs-radius-list, var(--cs-radius, 0));
  box-shadow: var(--cs-shadow, 0 18px 44px -14px rgba(0, 0, 0, .35));
  animation: csIn .18s ease-out both;
}
.cs.is-up .cs__list { top: auto; bottom: calc(100% + 6px); }
@keyframes csIn { from { opacity: 0; transform: translateY(-4px); } }
.cs__list li {
  padding: var(--cs-item, 10px 12px); border-radius: var(--cs-radius-item, 0); font-size: var(--cs-size, 16px); line-height: 1.3; cursor: pointer;
}
.cs__list li.is-active { background: var(--cs-hover, rgba(0, 0, 0, .06)); }
.cs__list li[aria-selected="true"] { color: var(--cs-accent, inherit); font-weight: var(--cs-weight, 500); }
.cs__list li[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .cs__list { animation: none; } .cs__btn::after { transition: none; } }