/* ==========================================================================
   CAOSmarada Design System · Action Row + Conviction Pillars
   --------------------------------------------------------------------------
   Linha operacional densa: ticker | título+caption | pillars | gate | chevron.
   Conv pillars: 5 barras tipo equalizer substituem "confiança 71%".
   Preview: .planning/design-preview/components.html + hub.html.
   ========================================================================== */

/* ---------- Action Row ---------- */
.cmd-action-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: var(--cmd-sp-4);
  align-items: center;
  padding: var(--cmd-sp-3) var(--cmd-sp-4);
  border-radius: var(--cmd-r-md);
  transition: background var(--cmd-t-fast), box-shadow var(--cmd-t-fast);
  cursor: pointer;
  border: 1px solid transparent;
}

.cmd-action-row:hover {
  background: var(--cmd-bg-surface);
  box-shadow: var(--cmd-sh-hover-em);
}

.cmd-action-row__tk {
  font: var(--cmd-w-medium) 13px/1 var(--cmd-ff-mono);
  color: var(--cmd-text-primary);
  font-variant-numeric: tabular-nums;
}

.cmd-action-row__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.cmd-action-row__title {
  font: var(--cmd-w-semibold) var(--cmd-f-body)/1.2 var(--cmd-ff-ui);
  color: var(--cmd-text-primary);
}

.cmd-action-row__caption {
  font: var(--cmd-w-regular) var(--cmd-f-caption)/1.4 var(--cmd-ff-ui);
  color: var(--cmd-text-tertiary);
}

.cmd-action-row__num {
  font: var(--cmd-w-regular) var(--cmd-f-caption)/1 var(--cmd-ff-mono);
  color: var(--cmd-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.cmd-action-row__chev {
  color: var(--cmd-text-tertiary);
  display: inline-flex;
  align-items: center;
}

/* ---------- Conviction Pillars (5 barras) ---------- */
.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);
  font-variant-numeric: tabular-nums;
}

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

.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);
  transition: background var(--cmd-t-fast);
}

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

/* Versão inline (sem grid de row) pra usar dentro de outras estruturas */
.cmd-conv-bars--inline {
  display: inline-flex;
  vertical-align: middle;
}