/**
 * Searchable dropdown.
 *
 * Tokens only, no literal colours: the site theme redefines the tokens for dark
 * mode, and a hard-coded white panel is exactly the thing that survives a theme
 * switch looking broken.
 */

.pcg-combo { position: relative; display: block; }

/* The native select stays in the form and keeps carrying the value. Hidden so
   it cannot be tabbed into or read out twice, but never display:none — some
   browsers skip validation and value restoration on a fully hidden control. */
.pcg-combo__native {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.pcg-combo__input { width: 100%; padding-right: 34px; }
.pcg-combo.is-chosen .pcg-combo__input { font-weight: 600; }

.pcg-combo__clear {
  position: absolute; top: 0; right: 0;
  width: 34px; height: 100%;
  display: none;
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1;
  color: var(--pcg-text-muted);
}
.pcg-combo.is-chosen .pcg-combo__clear { display: flex; }
.pcg-combo__clear:hover { color: var(--pcg-text); }

.pcg-combo__list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px); left: 0; right: 0;
  max-height: 340px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0; padding: 4px 0;
  list-style: none;
  background: var(--pcg-surface);
  color: var(--pcg-text);
  border: 1px solid var(--pcg-border-strong);
  border-radius: var(--pcg-radius);
  box-shadow: var(--pcg-shadow-lg);
}

.pcg-combo__group {
  padding: 8px 12px 4px;
  font-size: var(--pcg-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pcg-text-muted);
}

.pcg-combo__opt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  /* 40px of height rather than the 28 a mouse needs: most of this traffic is
     on a phone, and a list you cannot hit is worse than a list you scroll. */
  min-height: 40px;
  padding: 9px 12px;
  cursor: pointer;
}
.pcg-combo__opt.is-placeholder { color: var(--pcg-text-muted); font-style: italic; }
.pcg-combo__opt.is-active,
.pcg-combo__opt:hover {
  background: var(--pcg-primary);
  color: #fff;
}
.pcg-combo__opt.is-active .pcg-combo__meta,
.pcg-combo__opt:hover .pcg-combo__meta { color: rgba(255,255,255,.75); }
.pcg-combo__opt[aria-selected="true"] { font-weight: 700; }

.pcg-combo__meta {
  flex: none;
  font-size: var(--pcg-fs-xs);
  color: var(--pcg-text-muted);
  white-space: nowrap;
}

.pcg-combo__empty {
  padding: 10px 12px;
  color: var(--pcg-text-muted);
  font-size: var(--pcg-fs-sm);
}

/* No fallback rule is needed for a browser that does not run the script: the
   class below is applied BY the script, so the select is simply never hidden. */