/* ==========================================================================
   CAOSmarada Design System · Convicção em Pillars
   --------------------------------------------------------------------------
   Substitui "confiança 71%" por 5 barras verticais tipo equalizer.
   Variantes: long (emerald, default), hold (amber), sell (rose), insuf (cinza).
   Forma canônica de mostrar convicção no produto — não usar progress bar ou %.
   Preview: .planning/design-preview/components.html (seção "Convicção em pillars").
   ========================================================================== */

.cmd-conv-row {
  display: grid;
  grid-template-columns: 80px auto 1fr auto;
  gap: var(--cmd-sp-4);
  align-items: center;
  padding: 10px var(--cmd-sp-4);
  background: var(--cmd-bg-surface);
  border: 1px solid var(--cmd-border-subtle);
  border-radius: 9px;
}

.cmd-conv-row__tk {
  font: var(--cmd-w-medium) 13px/1 var(--cmd-ff-mono);
  color: var(--cmd-text-primary);
}

.cmd-conv-row__num {
  font: var(--cmd-w-regular) var(--cmd-f-micro)/1 var(--cmd-ff-mono);
  color: var(--cmd-text-tertiary);
}

/* Container das 5 barras */
.cmd-conv-bars {
  display: flex;
  gap: 2px;
  align-items: center;
}

.cmd-conv-bars > span {
  width: 6px;
  height: 14px;
  border-radius: 1px;
  background: var(--cmd-border-strong);
  display: inline-block;
}

/* Variante default = long (emerald) */
.cmd-conv-bars > span.on {
  background: var(--cmd-em);
}

/* Variantes semânticas */
.cmd-conv-bars--hold > span.on {
  background: var(--cmd-hold);
}

.cmd-conv-bars--sell > span.on {
  background: var(--cmd-sell);
}

.cmd-conv-bars--insuf > span.on {
  background: var(--cmd-text-tertiary);
}

/* Tamanho compacto (para listas densas tipo tabela watchlist) */
.cmd-conv-bars--sm > span {
  width: 4px;
  height: 10px;
}

/* Tamanho expandido (para hero Hub) */
.cmd-conv-bars--lg > span {
  width: 8px;
  height: 18px;
}