/* wgf-char-picker.css -- the armory-style character typeahead dropdown (M72).
   Pairs with wgf-char-picker.js: an absolutely positioned option list under the character (or
   realm) input, each row a race portrait ringed in the class colour, the class-coloured name,
   level + spec meta, and realm + faction crest on the right. Tokens only; hover / keyboard
   active states; reduced-motion safe (no animation used). */

.wgf-cp {
  position: relative;
}

.wgf-cp__list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 420px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: linear-gradient(180deg, var(--wgf-panel-3), var(--wgf-panel-1));
  border: 1px solid rgba(var(--wgf-gold-rgb), .45);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2, var(--shadow-1));
}

.wgf-cp__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-control);
  cursor: pointer;
}
.wgf-cp__row:hover,
.wgf-cp__row[aria-selected="true"] {
  background: rgba(var(--wgf-gold-rgb), .12);
}

.wgf-cp__portrait {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--cp-ring, var(--wgf-border-neutral));
  border-radius: 4px;
  background: #000;
  object-fit: cover;
}
.wgf-cp__portrait--blank {
  display: inline-block;
  background: linear-gradient(180deg, var(--wgf-panel-3), var(--wgf-panel-1));
}

.wgf-cp__txt {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wgf-cp__name {
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wgf-cp__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--wgf-muted);
  white-space: nowrap;
}
.wgf-cp__spec {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(var(--wgf-gold-rgb), .45);
  border-radius: 3px;
  background: #000;
}

.wgf-cp__realm {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--wgf-muted);
  text-align: right;
}
.wgf-cp__crest {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

@media (max-width: 560px) {
  .wgf-cp__list { max-height: 300px; }
  /* realm stays visible on mobile (it is what disambiguates same-name characters);
     the crest is the decoration that gives way */
  .wgf-cp__crest { display: none; }
}