/* Papéis de personagem (v0.39.1) e classes de carta (v0.40.1): selos, chips de classe, bloco do painel da unidade e
   colunas do relatório. Base neutra: o neon é da raridade, então o selo distingue papel e classe pela forma do ícone
   e pelo rótulo. O selo de classe usa o mesmo desenho do selo de papel. */
.role-badge,
.class-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  max-width: 100%;
  min-height: 22px;
  padding: 1px var(--s-2) 1px 6px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.role-badge .role-icon,
.class-badge .class-icon {
  flex: none;
}

.role-badge-label,
.class-badge-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Só o ícone, para a barra de heróis e a lista da equipe. */
.role-badge.is-compact,
.class-badge.is-compact {
  min-height: 0;
  padding: 1px 3px;
  gap: 0;
  border-radius: var(--radius-s);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--s-1);
  min-width: 0;
}

.card-tags .aura-tag {
  min-width: 0;
}

.catalog-card > .class-badge {
  margin-top: 1px;
}

.hero-slot .slot-line {
  align-items: center;
}

.team-slot-card .card-cost {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

.inspect-facts .role-badge,
.inspect-facts .class-badge {
  vertical-align: middle;
}

/* Inspeção: a frase da classe e o rank-chave. O rank-chave ganha só um traço e uma etiqueta, sem cor nova. */
.inspect-class-note {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-13);
  color: var(--text-2);
}

.inspect-facts .is-key-rank dt {
  color: var(--text);
  font-weight: 600;
}

.key-rank-tag {
  display: inline-block;
  padding: 0 var(--s-1);
  border-radius: var(--radius-s);
  border: 1px solid var(--line-strong);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

/* Em coluna dupla a célula é estreita demais para o rótulo ("Reforço" virava "Ref…"): classe e papel ocupam a linha. */
@media (max-width: 760px) {
  #inspect-hero-class-row,
  #inspect-hero-role-row {
    grid-column: 1 / -1;
  }
}

/* Painel da unidade: a classe logo abaixo do nome. */
.unit-class {
  display: block;
  margin-top: 2px;
}

.unit-class:empty {
  display: none;
}

/* Chips de classe (Inventário, Forja, Catálogo): ícone de traço, nome e, no Catálogo, a contagem. Neutros; ativo
   usa a mesma borda e fundo dos outros chips. */
.chip .class-icon {
  flex: none;
}

.chip.class-filter-chip,
.chip.catalog-class-chip {
  gap: var(--s-1);
}

@media (max-width: 600px), (pointer: coarse) {
  .chip.class-filter-chip,
  .chip.catalog-class-chip {
    min-height: 44px;
  }
}

/* Painel da unidade: renda, bônus que o Reforço dá e bônus recebido, em linhas próprias. */
.unit-role {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-m);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.unit-role[hidden] {
  display: none;
}

.unit-role-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
}

.unit-role-hint {
  font-size: var(--fs-12);
  color: var(--text-2);
}

.unit-role-grid {
  display: grid;
  gap: var(--s-1);
  margin: 0;
}

.unit-role-grid > div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--s-2);
  align-items: baseline;
}

.unit-role-grid dt {
  font-size: var(--fs-12);
  color: var(--text-2);
}

.unit-role-grid dd {
  margin: 0;
  font-size: var(--fs-13);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.unit-role-from,
.unit-role-none {
  display: block;
  font-size: var(--fs-12);
  font-weight: 400;
  color: var(--text-2);
}

.unit-role-allies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.unit-role-allies li {
  padding: 0 var(--s-2);
  border-radius: var(--radius-s);
  background: var(--surface-3);
  font-size: var(--fs-12);
  font-weight: 400;
}

/* Relatório de onda: duas colunas a mais quando alguém gera Yen ou ajuda aliados. */
.stats-card-subinfo .role-badge {
  display: inline-flex;
  margin-left: var(--s-2);
  vertical-align: middle;
}

.stats-card-metrics-grid.has-support {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.stats-card-row:has(.has-support) {
  grid-template-columns: minmax(170px, 1fr) minmax(100px, 0.6fr) minmax(360px, 1.8fr);
}

.stats-card-metrics-grid.has-support .metric-title {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .stats-card-row:has(.has-support) {
    grid-template-columns: 1fr 1fr;
  }

  .stats-card-metrics-grid.has-support {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .role-badge + .unit-role-hint {
    display: none;
  }

  .unit-role-grid > div {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}