/* Medidor da run — seção "Como foi a sua build" no resumo (docs/specs/player-identity.md).
   Só apresentação: os números já vêm somados de `js/game/state/runMeter.js` e projetados por
   `js/ui/screens/runMeterView.js`. Nenhuma informação vive SÓ na cor: a lista embaixo da barra repete tudo em texto
   (ui-gameplay.md §8.7). */

:root {
  /* Série de 8 cores + a de "Outras". As seis primeiras são, na ordem, as cores de qualidade de
     shared/data/config/qualities.json (normal · good · outstanding · excellent · masterpiece · shining) e as duas
     últimas vêm de `client/public/js/ui/format.js › BAND_COLORS` (risky e deadly). Nenhum tom novo foi inventado. */
  --meter-c0: #b8b8b8;
  --meter-c1: #4caf50;
  --meter-c2: #3d8bfd;
  --meter-c3: #a855f7;
  --meter-c4: #ff9800;
  --meter-c5: #ffffff;
  --meter-c6: #ff9800;
  --meter-c7: #e53935;
  --meter-cx: #6b6b6b;
}

.summary-meter {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
  /* SEM rolagem própria (avaliação de UX, rodada 2): com teto de 110 e `overflow-y: auto` o medidor era uma rolagem
     DENTRO da rolagem do corpo do resumo — sem barra à vista, cortava "Pancada de Escudo" ao meio e escondia Tempo e
     Mana. Quem rola agora é só o corpo do modal (screens.css `.summary-backdrop .window-body`, barra visível), e os
     botões do modal continuam fixos embaixo (`.modal-actions` fica fora do corpo). */
}

.summary-meter-title {
  font-weight: bold;
}

.summary-meter-partial {
  font-size: calc(7 * var(--px));
}

.meter-block {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
}

.meter-head {
  /* subtítulo no tamanho do texto normal (em 7 ele ficava minúsculo) e com respiro em cima: "Tempo" encostava na
     última linha de "Dano por habilidade" */
  line-height: calc(10 * var(--px));
  margin-top: calc(4 * var(--px));
}
.meter-block:first-of-type .meter-head { margin-top: 0; }

/* A barra usa o valor BRUTO no flex-grow (não o `pct` arredondado): assim nenhuma lacuna sobra no fim. */
.meter-bar {
  display: flex;
  height: calc(6 * var(--px));
  overflow: hidden;
}

.meter-seg {
  min-width: var(--px);
  background: var(--meter-c0);
}

/* "Não observado" (buraco da reconexão): listrado e sem nenhuma das cores de estado — a fatia tem de LER como ausência
   de medida, não como mais uma categoria. A cor base é a de "Outras", já existente. */
.meter-seg.is-unknown {
  background: repeating-linear-gradient(
    135deg,
    var(--meter-cx),
    var(--meter-cx) calc(2 * var(--px)),
    var(--c-text-dark) calc(2 * var(--px)),
    var(--c-text-dark) calc(4 * var(--px))
  );
}

.meter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--px);
  font-size: calc(7 * var(--px));
}

.meter-item {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
}

.meter-icon {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.meter-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meter-value {
  flex-shrink: 0;
}

.meter-sub {
  flex-shrink: 0;
}

.meter-idle {
  font-weight: bold;
}

.meter-note {
  font-size: calc(6 * var(--px));
}