/* ============================================================
   Combo
   A listbox that replaces the native <select> where the menu is
   part of the page's voice: the trigger wears the .input box, the
   menu wears the .suggest panel.
   ============================================================ */

.combo {
  position: relative;
}

/* ---------- Trigger ---------- */

.combo__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--field);
  border: 1px solid var(--border-3);
  border-radius: var(--r);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-align: left;
  padding: 11px 13px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

/* Same lift the .choice cards and outline buttons use */
.combo__btn:hover {
  border-color: #3d4f60;
}

.combo__btn:focus-visible,
.combo.is-open .combo__btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, .16);
}

.combo__btn.is-placeholder .combo__value {
  color: var(--placeholder);
}

.combo__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rows that read as an id plus a name — protos, policies. Kept inline
   so the pair truncates as one string. */
.combo__id {
  font-feature-settings: 'tnum';
}

.combo__sub {
  margin-left: 9px;
  color: var(--text-4);
}

/* flex, so the glyph — not the line box it sits in — is what's centred */
.combo__chev {
  display: flex;
  flex-shrink: 0;
  color: var(--text-4);
  transition: transform .16s cubic-bezier(.2, 0, .2, 1), color .15s;
}

.combo.is-open .combo__chev {
  transform: rotate(180deg);
  color: var(--accent-lt);
}

/* ---------- Size modifiers ---------- */

/* Matches .input--sm, for the dense rows: advanced settings, question cards */
.combo--sm .combo__btn {
  font-size: 14px;
  padding: 9px 11px;
  border-radius: 8px;
}

/* Sits in a flex row beside the question text, so it takes a set width
   rather than resizing as the answer type changes */
.combo--fixed {
  flex-shrink: 0;
  width: 152px;
}

/* ---------- Menu ---------- */

.combo__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border-3);
  border-radius: var(--r);
  padding: 4px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
  animation: suggest-in .13s cubic-bezier(.2, 0, .2, 1);
}

.combo--sm .combo__menu {
  border-radius: 8px;
}

.combo__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 8px 9px;
  font: inherit;
  font-size: 14px;
  color: var(--text-2);
}

.combo__opt:hover {
  background: rgba(255, 255, 255, .045);
}

/* Keyboard highlight — the same teal wash the owner suggestions use */
.combo__opt.is-active {
  background: rgba(20, 184, 166, .14);
  color: var(--accent-lt2);
}

.combo__opt.is-selected {
  color: var(--text);
}

.combo__opt-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Always laid out, so a row doesn't shift when the tick appears */
.combo__opt-check {
  display: flex;
  flex-shrink: 0;
  color: var(--accent-lt);
  opacity: 0;
}

.combo__opt.is-selected .combo__opt-check {
  opacity: 1;
}