/* Custom dropdown, standalone stylesheet. Pairs with dropdown.js. See README.md.

   Theming: set any of these custom properties (on :root or any ancestor) to restyle it. Each one
   falls back to the usual token names (--code, --border-strong, --text, --muted, --raised, --accent,
   --accent-ink, --accent-soft, --r-md, --r-sm, --shadow) and then to a built-in dark palette, so it
   works with no setup at all.

     --cd-field-bg      closed box background
     --cd-field-border  closed box border
     --cd-text          text colour
     --cd-muted         chevron colour
     --cd-bg            open list background
     --cd-border        open list border
     --cd-accent        focus and open highlight
     --cd-accent-ink    selected check mark and focus ring
     --cd-accent-soft   hovered and active option background
     --cd-radius        box and list corner radius
     --cd-item-radius   option corner radius
     --cd-shadow        open list shadow

   This file sets no cursor. A custom cursor stylesheet decides that, and its rules for
   .cd-trigger and .cd-option are documented in README.md. */

.cd { position: relative; display: block; width: 100%; }
.cd.cd-auto { display: inline-block; width: auto; max-width: 100%; vertical-align: middle; }
.cd[hidden] { display: none !important; }
.cd-native { display: none !important; }

.cd-trigger {
  box-sizing: border-box; width: 100%; margin: 0; padding: 9px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
  font: inherit; font-weight: 400; line-height: inherit;
  color: var(--cd-text, var(--text, #eceff4));
  background: var(--cd-field-bg, var(--code, #0e1117));
  border: 1px solid var(--cd-field-border, var(--border-strong, #323b4c));
  border-radius: var(--cd-radius, var(--r-md, 10px));
  transition: border-color 0.12s, box-shadow 0.12s;
}
.cd-trigger:hover:not(:disabled) { border-color: var(--cd-muted, var(--muted, #8e9ab0)); }
.cd-trigger:disabled { opacity: 0.5; }
.cd-trigger:focus-visible { outline: 2px solid var(--cd-accent-ink, var(--accent-ink, #f5b03e)); outline-offset: 2px; }
.cd-trigger[aria-expanded="true"] {
  border-color: var(--cd-accent, var(--accent, #f5b03e));
  box-shadow: 0 0 0 3px var(--cd-accent-soft, var(--accent-soft, rgba(245, 176, 62, 0.14)));
}
.cd-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-trigger::after {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 2px 0 0;
  border-right: 1.5px solid var(--cd-muted, var(--muted, #8e9ab0));
  border-bottom: 1.5px solid var(--cd-muted, var(--muted, #8e9ab0));
  transform: rotate(45deg);
}
.cd-trigger[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }

.cd-list {
  position: fixed; z-index: 400; overflow: auto; box-sizing: border-box; padding: 5px;
  color: var(--cd-text, var(--text, #eceff4));
  background: var(--cd-bg, var(--raised, #1b212c));
  border: 1px solid var(--cd-border, var(--border-strong, #323b4c));
  border-radius: var(--cd-radius, var(--r-md, 10px));
  box-shadow: var(--cd-shadow, var(--shadow, 0 10px 34px rgba(0, 0, 0, 0.45)));
  font: inherit;
}
.cd-option {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px;
  border-radius: var(--cd-item-radius, var(--r-sm, 7px)); overflow-wrap: anywhere;
}
.cd-option:hover, .cd-option.cd-active { background: var(--cd-accent-soft, var(--accent-soft, rgba(245, 176, 62, 0.14))); }
.cd-option[aria-selected="true"] { font-weight: 600; }
.cd-option[aria-selected="true"]::after {
  content: ""; flex: 0 0 auto; width: 5px; height: 9px; margin-top: -3px;
  border-right: 2px solid var(--cd-accent-ink, var(--accent-ink, #f5b03e));
  border-bottom: 2px solid var(--cd-accent-ink, var(--accent-ink, #f5b03e));
  transform: rotate(45deg);
}
.cd-option.cd-disabled { opacity: 0.45; }
.cd-group { padding: 8px 10px 3px; font-size: 0.78rem; font-weight: 600; color: var(--cd-muted, var(--muted, #8e9ab0)); }

@media (prefers-reduced-motion: reduce) { .cd-trigger { transition: none; } }