.ldn { position: relative; display: inline-block; max-width: 100%; color: #172033; font: inherit; text-align: start; }
.ldn *, .ldn *::before, .ldn *::after { box-sizing: border-box; }
.ldn .ldn__trigger { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; margin: 0; padding: 10px 14px; border: 1px solid #dce1e8; border-radius: 10px; background: #fff; color: inherit; font: inherit; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: normal; text-transform: none; box-shadow: 0 1px 2px #17203308; cursor: pointer; }
.ldn .ldn__trigger:hover { border-color: #aeb9c9; background: #f8fafc; }
.ldn__label { overflow-wrap: anywhere; }
.ldn .ldn__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; overflow: hidden; }
.ldn .ldn__icon svg { display: block; width: 100%; height: 100%; }
.ldn .ldn__arrow { display: block; width: 16px; height: 16px; margin-inline-start: 6px; flex: 0 0 16px; transition: transform 150ms ease; }
.ldn .ldn__panel { position: absolute; z-index: 1000; top: calc(100% + 8px); inset-inline-end: 0; width: max-content; min-width: 100%; max-width: min(20rem, calc(100vw - 24px)); margin: 0; padding: 0; border: 0; color: #172033; visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(var(--ldn-shift, 0px)); }
/* The bridge lives outside the scrolling list so overflow cannot clip it. */
.ldn .ldn__panel::before { content: ""; position: absolute; inset-inline: 0; top: -10px; height: 10px; background: transparent; }
.ldn .ldn__list { display: block; list-style: none; max-height: min(65vh, 30rem); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 6px; border: 1px solid #e3e8ef; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px #17203324, 0 2px 6px #1720330a; }
.ldn .ldn__item { display: block; list-style: none; margin: 0; padding: 0; border: 0; }
.ldn .ldn__link { display: flex; align-items: center; gap: 11px; min-height: 44px; margin: 0; padding: 10px 12px; border: 0; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-size: 14px; line-height: 1.5; text-decoration: none; box-shadow: none; overflow-wrap: anywhere; }
.ldn .ldn__link:hover { background: #f0f4f9; color: #172033; }
.ldn .ldn__link.is-active { background: #eaf2ff; color: #1d4ed8; font-weight: 600; }
.ldn .ldn__trigger:focus-visible, .ldn .ldn__link:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.ldn[data-open="true"] > .ldn__panel { visibility: visible; opacity: 1; pointer-events: auto; }
.ldn[data-open="true"] .ldn__arrow { transform: rotate(180deg); }
@media (hover: hover) {
  .ldn:not([data-suppress-hover="true"]):hover > .ldn__panel { visibility: visible; opacity: 1; pointer-events: auto; }
  .ldn:not([data-suppress-hover="true"]):hover .ldn__arrow { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ldn .ldn__arrow { transition: none; }
}