/* <Dropdown> — anchored option list. `position: absolute` against the
   caller's `position: relative` wrapper (see Dropdown.tsx's file-top
   comment) so it hangs directly under the badge that opened it.
   `--bg-elev` is the same elevated-surface slot the badge uses when
   open (../badge/Badge.css), so the pair reads as one continuous panel. */
.ui-dropdown {
  position: absolute;
  top: calc(100% + 0.25em);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 12em;
  padding: 0.25em;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 0.5em;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.35);
}
.ui-dropdown-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1em;
  min-height: 2.75em;
  padding: 0.4em 0.7em;
  border: none;
  border-radius: 0.35em;
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ui-dropdown-item:hover {
  background: var(--border);
}
.ui-dropdown-item-active {
  background: var(--purple-dim);
}
.ui-dropdown-item-active .ui-dropdown-item-label::before {
  content: '✓ ';
  color: var(--purple);
}
/* Destructive action row (cancel turn) — ported from the old standalone
   `.btn-cancel-turn`'s red-on-transparent look now that it lives here
   instead of its own button (mara: "if the cancel turn button moves
   into the dropdown, it should be fine"). */
.ui-dropdown-item-danger {
  color: var(--red);
}
.ui-dropdown-item-danger:hover {
  background: color-mix(in srgb, var(--red) 12%, transparent);
}
.ui-dropdown-item-desc {
  font-size: 0.8em;
  /* `--muted-on-dim`, not bare `--muted`: an *active* item's row bg is
     `--purple-dim` (above), the same low-contrast-on-elevated-fill case
     Badge.css hit — see theme.css's `--muted-on-dim` comment. Inactive
     rows are transparent (falls through to `--bg-elev`), where the two
     vars read close enough that this doesn't cost anything there. */
  color: var(--muted-on-dim);
}