.dropdown {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
}

.dropdown__inner {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.dropdown__header {
  width: 100%;
  cursor: pointer;
}

.dropdown__list-wrapper {
  overflow: hidden;
  height: 0;
  transition: height var(--transition-standard);
}

/* The 12px header-to-list gap lives here, as this child's own margin, not as
   padding on .dropdown__list-wrapper. Padding can't be animated away: even
   with box-sizing:border-box, a browser won't shrink a box's rendered height
   below its own padding, so height:0 with padding-top:12px still rendered as
   a visible 12px strip — exactly the "extra space at the bottom" bug when
   closed. A child's margin has no such floor: .dropdown__list-wrapper's
   overflow:hidden establishes a new block-formatting context, which
   contains this margin entirely within the wrapper rather than letting it
   collapse through/escape — so it clips away cleanly at height:0. */
.dropdown__list {
  width: 100%;
  /* 24px, matching this same rule's own gap below — the header-to-first-
     item spacing was 12px (half the between-item gap), which read as
     visibly tighter for the selected/header row than for the rest of the
     list. Per explicit instruction, both are now the same value. */
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dropdown__option {
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

/* margin-top centers the chevron on the 40px header row specifically, not
   on the whole (potentially much taller, once open) .dropdown__inner column
   — confirmed against Figma's real coordinates: in the open state the icon
   sits at y:25-41 within a header row spanning y:12-52, i.e. centered on
   the row, not pinned to the container's top edge (which would read ~12px
   higher) and nowhere near centered on the full open height. */
.dropdown__chevron {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 12px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown__chevron-icon {
  width: 16px;
  height: 16px;
  background-color: var(--text-secondary);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transform: rotate(0deg);
  transition: transform var(--transition-standard);
}

/* -180deg (not +180deg): opening (closed→open) then animates through
   decreasing angles, i.e. counter-clockwise, and closing (open→closed)
   through increasing angles back to 0, i.e. clockwise — the two turn
   directions requested, achieved by which sign the target angle uses rather
   than by anything direction-specific in the transition itself. */
.dropdown__chevron--open .dropdown__chevron-icon {
  transform: rotate(-180deg);
}