.pulse-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: 0 0 24px;
  background: transparent;
  border-bottom: 1px solid var(--viz-border);
}
.pulse-heading h1 {
  font-family: var(--viz-font-number);
  font-size: clamp(2.441rem, 5vw, 4.8rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.02em;
}
.pulse-heading p { margin-top: 8px; color: var(--viz-muted); max-width: 65ch; }
.pulse-heading p strong { color: var(--viz-text); font-weight: 700; }
.pulse-quality { flex: none; font-family: var(--viz-font-label); color: var(--viz-accent-2); }

#btn-sync-all { width: auto; padding: 0 20px; justify-content: center; }

.pulse-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 0 24px;
}
.pulse-roster__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--viz-border);
  background: var(--viz-surface);
}
.pulse-roster__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--viz-bg);
  border: 1px solid var(--viz-border);
  flex: 0 0 auto;
}
.pulse-roster__nome {
  min-width: 0;
  font-size: .85rem;
  color: var(--viz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pulse-roster__icones { display: flex; flex: 0 0 auto; gap: 2px; }
.pulse-roster__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.pulse-roster__icone svg { width: 16px; height: 16px; }
.pulse-roster__icone--vazio { opacity: .35; cursor: default; }
#btn-sync-all[disabled] { opacity: .5; cursor: wait; }

.pulse-briefing {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0;
  background: var(--viz-border);
}
.make-instrument {
  min-width: 0;
  min-height: 152px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 20px;
  padding: 20px;
  background: var(--viz-surface);
  border: 0;
}
.make-instrument__copy, .make-instrument__visual { min-width: 0; }
.make-instrument__label {
  display: block;
  font-family: var(--viz-font-label);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--viz-muted);
}
/* Ausencia nao e' valor — mesmo tratamento do .viz-metric__value--ausente. */
.make-instrument__value--ausente,
.pulse-reach-breakdown__value--ausente {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--viz-muted);
  letter-spacing: .08em;
}

.make-instrument__value {
  display: block;
  margin-top: 8px;
  font-family: var(--viz-font-number);
  font-size: clamp(2rem, 4vw, 3.052rem);
  line-height: .95;
  overflow-wrap: anywhere;
}
.make-instrument__context { display: block; margin-top: 8px; font-size: .8rem; color: var(--viz-muted); }
/* Leitura principal da gravadora: maior que as outras duas, sem cor de marca. */
.make-instrument--hero .make-instrument__value { font-size: clamp(2.6rem, 5vw, 4.25rem); }
.make-instrument--hero .make-instrument__value--ausente { font-size: clamp(1.1rem, 2vw, 1.4rem); }
/* Nome de artista é rótulo da leitura, não o número dela. */
.make-instrument__value--nome { font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.05; }
.make-instrument__visual { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.make-instrument__track { height: 8px; background: var(--viz-grid); overflow: hidden; }
.make-instrument__fill { display: block; height: 100%; width: var(--pulse-value); background: var(--pulse-color); }
.make-instrument__meta { font-family: var(--viz-font-label); font-size: .8rem; color: var(--viz-muted); }

/* `align-items: start` impediria o painel de esticar, mas o problema era o
   contrario: o painel ESTICAVA e o conteudo nao, deixando ~45% da coluna maior
   em branco enquanto o ranking ao lado corria ate 2440px (critique de 10 SET
   2026). O painel da esquerda passa a distribuir a altura que recebe, e o
   grafico de participacao fica com o que sobra. */
.pulse-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 1px; }
.pulse-layout > .pulse-panel:first-child { display: flex; flex-direction: column; }
.pulse-layout > .pulse-panel:first-child > .pulse-panel__body { flex: 1; display: flex; flex-direction: column; }
/* .pulse-share ja nascia com flex:1 (linha 123): o que faltava era a corrente
   inteira acima dele crescer, senao o `flex:1` distribui uma altura que nunca
   chega. O grafico e' #pulse-share-pie.pulse-chart--pie. */
.pulse-layout > .pulse-panel:first-child .pulse-chart--pie { flex: 1; min-height: 220px; }
/* A altura da linha e' ditada pela coluna esquerda (mapa + participacao, com teto
   deliberado de 680px no doughnut). O ranking NAO participa desse calculo:
   `contain: size` zera a altura intrinseca dele, e o grid o estica ate a altura da
   linha. O corpo ocupa o que sobra e rola por dentro. Era `max-height: 60vh`, que
   cortava a lista com espaco vazio embaixo (12 OUT 2026); sem o `contain`, a lista
   longa voltaria a esticar a linha ate 2440px (critique de 10 SET 2026).
   `.pulse-rankings` e nao `.pulse-panel:last-child`: o segundo filho do grid e'
   um wrapper <div class="pulse-rankings">, nao o proprio painel. `min-height`
   garante um painel legivel quando a coluna esquerda e' baixa. */
.pulse-rankings { contain: size; min-height: 420px; }
.pulse-rankings .pulse-panel__body { min-height: 0; overflow-y: auto; }
.pulse-panel { min-width: 0; background: var(--viz-surface); border: 1px solid var(--viz-border); }
.pulse-panel__header { display: block; padding: 20px; background: transparent; border-bottom: 1px solid var(--viz-border); }
.pulse-panel__header h2 { font-family: var(--viz-font-label); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
.pulse-panel__header p { margin-top: 4px; font-size: .8rem; color: var(--viz-muted); }
.pulse-panel__body { padding: 8px 20px 20px; }
.pulse-chart { position: relative; min-height: 360px; padding: 16px; }
.pulse-panel--map { display: flex; flex-direction: column; }
.pulse-share { border-top: 1px solid var(--viz-border); padding: 16px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* .chart-share__toggle* (Cockpit, "Share por plataforma") reusa a mesma receita
   visual — classe própria, não .pulse-share__toggle-btn, porque testes do Pulso
   selecionam esse nome sem escopo (toHaveLength(3)); widget diferente, dado
   diferente, precisa de seletor próprio mesmo herdando o visual. */
.pulse-share__toggle, .chart-share__toggle { display: inline-flex; border: 1px solid var(--viz-border); }
.pulse-share__toggle-btn, .chart-share__toggle-btn {
  font-family: var(--viz-font-label); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  min-height: 44px; padding: 8px 16px; background: transparent; color: var(--viz-muted); border: 0; cursor: pointer;
}
.pulse-share__toggle-btn.is-ativo, .chart-share__toggle-btn.is-ativo { background: var(--viz-accent-2); color: var(--viz-bg); }
/* Linha de controles: categoria (esquerda) + tipo de grafico (direita), lado
   a lado — antes so existia o toggle de categoria sozinho, ocupando a linha
   inteira. */
.pulse-share__controles { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pulse-share__chart-toggle { display: inline-flex; border: 1px solid var(--viz-border); flex: 0 0 auto; }
.pulse-share__chart-btn {
  display: flex; align-items: center; justify-content: center;
  /* 44px, nao 40: alvo de toque minimo da casa e piso da WCAG 2.5.5. */
  min-width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--viz-muted); border: 0; cursor: pointer;
}
.pulse-share__chart-btn.is-ativo { background: var(--viz-accent-2); color: var(--viz-bg); }
.pulse-share__chart-btn + .pulse-share__chart-btn { border-left: 1px solid var(--viz-border); }
.pulse-share__legenda { margin-top: 10px; font-size: .8rem; color: var(--viz-muted); }
/* Teto de altura junto com a proporcao do proprio grafico: o container e filho
   de um painel flex alto, e sem limite o canvas acompanhava a altura do vizinho. */
/* Dobro do teto anterior (09 SET 2026, pedido do operador): um doughnut
   sempre desenha um circulo do tamanho da MENOR dimensao disponivel — com
   teto de 340px numa coluna larga (2fr do grid), o circulo ficava pequeno e
   sobrava espaco morto nas laterais. Dobrar a altura deixa o circulo crescer
   de verdade, sem reintroduzir o bug de 08 SET (esticar sem teto nenhum). */
.pulse-chart--pie { flex: 0 1 auto; min-height: 440px; max-height: 680px; }
.pulse-chart canvas { max-width: 100%; }
.pulse-rankings { display: grid; grid-template-rows: minmax(0, 1fr); gap: 1px; }  /* minmax(0,...): 1fr puro cresce com o conteúdo e o painel transbordava */
.pulse-rankings .pulse-panel { display: flex; flex-direction: column; height: 100%; }
.pulse-rankings .pulse-panel__body { flex: 1; overflow-y: auto; }
.pulse-rank-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--viz-border);
}
.pulse-rank-row strong { overflow-wrap: anywhere; }
.pulse-rank-row span { color: var(--viz-muted); font-size: .8rem; }
.pulse-rank-row__value { font-family: var(--viz-font-number); font-size: 1.563rem; color: var(--viz-text) !important; }
.pulse-rank-row--attention .pulse-rank-row__value { color: var(--conf-block) !important; }
.pulse-empty { padding: 20px 0; color: var(--viz-muted); }
.pulse-ranking-heading { font-family: var(--viz-font-label); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--viz-muted); padding: 10px 0 4px; }
.pulse-ranking-heading--atencao { color: var(--conf-block); }

/* Alerta executivo de streams (Ditto). O tom vai na borda e no kicker; o texto
   principal fica em --viz-text para nao depender de contraste de cor semantica. */
.pulse-executive-alert {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 24px 0 0;
  padding: 16px 20px;
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
}
.pulse-executive-alert p { margin: 0; }
.pulse-executive-alert__kicker { font-family: var(--viz-font-label); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--viz-muted); }
.pulse-executive-alert__headline { font-size: 1.25rem; line-height: 1.25; color: var(--viz-text); overflow-wrap: anywhere; }
.pulse-executive-alert__detail, .pulse-executive-alert__meta { font-size: .875rem; color: var(--viz-muted); }
.pulse-executive-alert__aviso { font-size: .875rem; color: var(--viz-text); }
.pulse-executive-alert__abrir { align-self: flex-start; }
.pulse-executive-alert--queda { border-color: var(--conf-block); }
.pulse-executive-alert--queda .pulse-executive-alert__kicker { color: var(--conf-block); }
.pulse-executive-alert--defasado { border-color: var(--conf-warn); }
.pulse-executive-alert--defasado .pulse-executive-alert__kicker { color: var(--conf-warn); }
.pulse-executive-alert--ok { border-color: var(--conf-ok); }
.pulse-executive-alert--ok .pulse-executive-alert__kicker { color: var(--conf-ok); }

.make-instrument--stat { grid-template-columns: 1fr; }
.pulse-reach-breakdown { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.pulse-reach-breakdown__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pulse-reach-breakdown__nome { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.pulse-reach-breakdown__unit { font-size: .75rem; color: var(--viz-muted); }
.pulse-reach-breakdown__label { font-family: var(--viz-font-label); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--viz-muted); }
.pulse-reach-breakdown__value { font-family: var(--viz-font-number); font-weight: 700; font-size: clamp(1.25rem, 2.2vw, 1.9rem); }
.pulse-artist-card {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--viz-border);
  background: transparent;
  border-left: 0; border-right: 0; border-top: 0;
  text-align: left;
  cursor: pointer;
}
.pulse-artist-card__rank { font-family: var(--viz-font-number); font-size: 1.25rem; color: var(--viz-muted); }
.pulse-artist-card__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pulse-artist-card__main strong { overflow-wrap: anywhere; }
.pulse-artist-card__reach { font-family: var(--viz-font-number); font-size: 1.25rem; }
.pulse-artist-card__reach.is-alta { color: var(--conf-ok); }
.pulse-artist-card__reach.is-queda { color: var(--conf-block); }
/* Colunas alinhadas: ocupa a largura inteira do cartão, abaixo de posição/nome/spark. */
.pulse-artist-card__metrics {
  grid-column: 1 / -1;
  display: grid;
  /* Largura mínima por coluna: abaixo disso o número estouraria. Na faixa estreita (1201 a ~1260 px,
     painel lateral de ~310 px) a quinta métrica desce para a segunda linha em vez de ser cortada. */
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: 4px 8px;
  min-width: 0;
}
.pulse-artist-card__metric { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pulse-artist-card__metric-label {
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--viz-muted);
}
.pulse-artist-card__metric-value {
  font-family: var(--viz-font-number);
  font-size: .875rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pulse-artist-card__metric-value--ausente { font-size: .75rem; color: var(--viz-muted); letter-spacing: .08em; }
.pulse-artist-card__faixa { grid-column: 1 / -1; font-size: .8rem; color: var(--viz-muted); overflow-wrap: anywhere; }
.pulse-artist-card__spark { flex: none; width: 120px; height: 32px; }
.pulse-artist-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.pulse-sparkline { width: 100%; height: 100%; display: block; }

@media (max-width: 1200px) {
  .pulse-briefing { grid-template-columns: 1fr; }
  .pulse-layout { grid-template-columns: 1fr; }
  /* Coluna unica: o ranking e' a segunda linha, nao divide altura com ninguem. Volta ao fluxo, com
     teto, senao `contain: size` o reduziria a zero. */
  .pulse-rankings { contain: none; min-height: 0; }
  .pulse-rankings .pulse-panel__body { max-height: 60vh; }
}
@media (max-width: 640px) {
  .pulse-heading { align-items: flex-start; flex-direction: column; }
  .pulse-roster__item { width: 100%; }
  .make-instrument { grid-template-columns: 1fr; }
  .pulse-chart { min-height: 300px; padding: 8px; }
  .pulse-artist-card { grid-template-columns: auto minmax(0, 1fr); }
  .pulse-artist-card__spark { display: none; }
  .pulse-artist-card__side { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; }
}

.pulse-artist-card__nome {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
}
.pulse-artist-card__avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  background: var(--viz-surface);
  border: 1px solid var(--viz-border);
  flex: 0 0 auto;
}

/* O nome é um botão: escolhe o recorte do gráfico ao lado sem sair da visão
   geral. Herda a tipografia do card para não parecer um controle avulso. */
.pulse-artist-card__nome {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-weight: 600;
  color: var(--viz-text);
}
.pulse-artist-card__nome:hover { color: var(--viz-accent-2); }
/* Em foco, o nome cresce e ganha a cor de destaque — o pedido era ver de
   relance qual artista está governando o gráfico. */
.pulse-artist-card__nome.is-foco {
  font-size: 1.05rem;
  color: var(--viz-accent-2);
}
/* Era barra lateral de 3px — mesmo tique que .diag-plataforma. O foco ja
   esta dito no nome (.pulse-artist-card__nome.is-foco muda cor e corpo); a
   linha inteira ganha um fundo levemente tingido em vez da barra, como
   .pill-forte ja faz para estado vivo. */
.pulse-artist-card.is-foco {
  background: color-mix(in srgb, var(--viz-accent-2) 7%, transparent);
  padding-left: 10px;
  padding-right: 10px;
}
.pulse-artist-card__abrir {
  align-self: flex-start;
  margin-top: 4px;
  font-family: var(--viz-font-label);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--viz-muted);
  background: transparent;
  border: 1px solid var(--viz-border);
  border-radius: 0;
  min-height: 44px;
  padding: 0 .75rem;
  cursor: pointer;
}
.pulse-artist-card__abrir:hover { color: var(--viz-accent); border-color: var(--viz-accent); }