/*
 * Cartão "GitHub Actions" na tela de Custo (card ZodmW0Gv). Arquivo próprio: `painel.css` já
 * passou do teto. Só tokens de `painel.css` (cor, fonte, raio), então vale nos dois temas.
 *
 * Moldura = a de `.falha` (borda de 1 px, sem sombra). Dentro, três blocos: minutos e dinheiro na
 * mesma coluna (o número em Georgia + trilho com as marcas de 50 % e 80 %), quem mais gastou e
 * armazenamento. No desktop os
 * três ficam lado a lado; abaixo de 1024 px empilham.
 *
 * ⚠️ CSP do painel: `default-src 'self'` — estilo inline em atributo é IGNORADO. Nada aqui depende
 * de `style="…"` no HTML; a largura da barra vem por CSSOM (`el.style.width`), que a CSP permite.
 */

.cota-github {
  margin-bottom: 22px;
}

.cota-situacao {
  margin-bottom: 0;
}

.cota-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}

.cota-bloco {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.cota-bloco .linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.cota-bloco .linha .rotulo {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cota-bloco .linha .valor {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cota-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.cota-numero {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.cota-pct {
  /* "114 %" nunca quebra em duas linhas no celular (achado no QA do card hujNnPOw). */
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.cota-trilho {
  position: relative;
  height: 10px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}

.cota-trilho i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ok);
  border-radius: 99px;
}

.cota-minutos.warn .cota-trilho i,
.cota-dinheiro.warn .cota-trilho i,
.cota-here.warn .cota-trilho i {
  background: var(--accent);
}

.cota-minutos.crit .cota-trilho i,
.cota-dinheiro.crit .cota-trilho i,
.cota-here.crit .cota-trilho i {
  background: var(--crit);
}

.cota-minutos.crit .cota-pct,
.cota-dinheiro.crit .cota-pct,
.cota-here.crit .cota-pct {
  color: var(--crit);
}

/* Minutos em cima, dinheiro embaixo (card hujNnPOw): a mesma coluna, separados por um fio. */
.cota-medidores {
  gap: 16px;
}

.cota-dinheiro {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* As marcas de 50 % (atenção) e 80 % (crítico): os mesmos limiares do aviso por issue + card. */
.cota-trilho::before,
.cota-trilho::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  /* Tinta forte, não a cor do grau: a marca precisa aparecer também POR CIMA da barra cheia. */
  background: var(--ink-2);
  z-index: 1;
}

.cota-trilho::before {
  left: 50%;
}

.cota-trilho::after {
  left: 80%;
  background: var(--ink);
}

.cota-marcas {
  position: relative;
  height: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.cota-marcas span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.cota-marca-50 {
  left: 50%;
}

.cota-marca-80 {
  left: 80%;
}

.cota-motivo {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

.cota-subtitulo {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* HERE (card YPgPq0hg): o subtítulo respira depois da lista da TomTom; o provedor em vigor numa linha. */
.cota-subtitulo-here {
  margin-top: 26px;
}

.consumo-here-provedor {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.consumo-here-provedor b {
  color: var(--ink);
}

@media (max-width: 1023px) {
  .cota-corpo {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* Celular: o número grande cabe numa linha ("US$ 1,64 de US$ 5,00", "2.277 de 2.000 min"). */
@media (max-width: 479px) {
  .cota-numero {
    font-size: 1.2rem;
  }
}