/* the picture dropdown: a face that looks like .select, and a list that floats over the page */
.picker { display: inline-flex; min-width: 0; }
.picker-button { display: inline-flex; align-items: center; gap: var(--space-3); max-width: 260px; text-align: left; }
.picker-button .picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-button .picker-icon { width: 20px; height: 20px; }
.picker-button[aria-expanded="true"] { border-color: var(--amber); color: var(--text-1); }

.picker-list {
  position: fixed;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: min(360px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  background: var(--bg-raised-2);
  box-shadow: var(--shadow-pop);
  transform-origin: top;
  animation: picker-open var(--dur-base) var(--ease-out);
}
.picker-list.above { transform-origin: bottom; }
.picker-list.closing { animation: picker-close 120ms ease-in forwards; pointer-events: none; }
@keyframes picker-open { from { opacity: 0; scale: 1 .92; translate: 0 -4px; } }
@keyframes picker-close { to { opacity: 0; scale: 1 .96; } }

.picker-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 32px;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--text-2);
  font: 600 13px/1.2 var(--font-ui);
  text-align: left;
  cursor: pointer;
  animation: picker-option-in var(--dur-base) var(--ease-out) both;
  animation-delay: calc(min(var(--i), 10) * 14ms);
  transition: background var(--dur-fast), color var(--dur-fast);
}
@keyframes picker-option-in { from { opacity: 0; translate: -4px 0; } }
.picker-option:hover, .picker-option:focus-visible { background: var(--bg-chip); color: var(--text-1); outline: none; }
.picker-option:active { scale: .98; }
.picker-option.current { background: color-mix(in oklch, var(--amber) 16%, transparent); color: var(--text-1); box-shadow: inset 2px 0 0 var(--amber); }
.picker-option:disabled { color: var(--text-4); cursor: default; }
.picker-option:disabled .picker-icon { filter: grayscale(1); opacity: .5; }
.picker-icon { width: 24px; height: 24px; border-radius: var(--radius-sm); object-fit: cover; }
.picker-icon.none { background: transparent; }
.picker-note { font: 600 12px/1 var(--font-mono); color: var(--text-3); }
.picker-option.current .picker-note { color: var(--amber); }

/* an emblem crops like the rank buttons; a role icon sits in the same box as a picture */
.picker-icon.emblem-box, .picker-icon.role-box { display: grid; place-items: center; object-fit: initial; }
.picker-icon.emblem-box .emblem { --emblem: 22px; }
.picker-button .picker-icon.emblem-box .emblem { --emblem: 20px; }
.picker-icon.role-box .role-svg { width: 18px; height: 18px; color: var(--text-2); }
.picker-option.current .role-svg, .picker-button .role-svg { color: var(--amber); }