/* O formato desta conta — o cartão que mostra o que foi medido, e em quantos
 * posts. Escopo .op-formato; usa as mesmas variáveis do tema operacional
 * (--exp-*) e o desenho de cartão de operacao-ajustes.css, sem redesenhar
 * nada.
 *
 * Nenhuma largura nem cor vem de style="…" no HTML: a CSP da página bloqueia
 * atributo de estilo, e este cartão não tem barra — só texto com base. */

/* A linha que diz em quantos posts, e de onde eles vieram. Ela vem ANTES das
 * medidas de propósito: quem lê "31 dos 87 são fio" já leu o 87 uma vez. */
.op-formato__base { margin: 2px 0 8px; font-size: 13px; line-height: 1.45; color: var(--exp-muted); }

.op-formato__lista {
  margin: 0 0 10px; padding-left: 16px;
  font-size: 13px; line-height: 1.55; color: var(--exp-ink);
}
.op-formato__lista > li { margin: 0 0 3px; }

/* A ressalva da recontagem. Não é rodapé miúdo: é a frase que evita a pessoa
 * concluir que o Langris está quebrado quando as curtidas não sobem. */
.op-formato__ressalva {
  margin: 0 0 10px; padding-left: 10px; font-size: 12.5px; line-height: 1.45;
  color: var(--exp-muted); border-left: 2px solid color-mix(in oklch, var(--exp-line) 80%, transparent);
}

.op-formato__naosei { margin: 2px 0 6px; font-size: 13px; line-height: 1.5; color: var(--exp-ink); }
.op-formato__saidas { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--exp-muted); }

/* Por que o botão está desligado. Texto de verdade, não só o cinza do botão. */
.op-formato__motivo {
  margin: 2px 0 10px; padding-left: 10px; font-size: 13px; line-height: 1.45;
  color: var(--exp-ink); border-left: 2px solid var(--exp-accent);
}

.op-formato__andamento { margin: 10px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--exp-muted); }

.op-formato__resultado { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--exp-ink); }
/* Cor não é o único aviso: o texto já diz o que houve. A barra à esquerda
 * existe para quem varre a tela, não para quem depende dela. */
.op-formato__resultado[data-formato-estado="erro"] {
  padding-left: 10px; border-left: 2px solid var(--exp-accent);
}
.op-formato__resultado[data-formato-estado="ok"] {
  padding-left: 10px; border-left: 2px solid color-mix(in oklch, var(--exp-accent) 45%, transparent);
}

/* Pele Pulso — o formato desta conta (rebranding de 26/09/2026). Só escuro, qualificado por .op-voce.
 * O filete cobalto dos avisos vira a nota com ponto do Início: limão para o que fazer e para o que deu
 * certo, erro para o que falhou. O texto continua dizendo o que houve; o ponto é para quem varre a tela. */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce :is(.op-formato__base, .op-formato__saidas, .op-formato__andamento) { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce :is(.op-formato__lista, .op-formato__naosei, .op-formato__motivo, .op-formato__resultado) { color: var(--lg-tinta-2); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-formato__lista > li::marker { color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-formato__ressalva { border-left-color: var(--lg-linha-forte); color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce :is(.op-formato__motivo, .op-formato__resultado[data-formato-estado]) {
  position: relative; padding-left: 16px; border-left: 0;
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce :is(.op-formato__motivo, .op-formato__resultado[data-formato-estado])::before {
  content: ''; position: absolute; left: 1px; top: calc(.73em - 3.5px); width: 7px; height: 7px; border-radius: 50%;
  background: var(--lg-limao); box-shadow: 0 0 10px var(--lg-limao);
}
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-formato__resultado[data-formato-estado="erro"]::before { background: var(--lg-erro); box-shadow: 0 0 10px var(--lg-erro); }
/* Contas do X: pílulas; a escolhida com borda limão (sobrepõe o cobalto de operacao-redesenho.css). */
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-formato__conta { border-color: var(--lg-linha); color: var(--lg-apoio); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-formato__conta:hover { background: var(--lg-realce); color: var(--lg-tinta); }
body.produto-operacional[data-op-tema]:not([data-op-tema="claro"]) .op-voce .op-formato__conta.ativo {
  border-color: var(--lg-limao); background: color-mix(in srgb, var(--lg-limao) 7%, transparent); color: var(--lg-tinta);
}
/* Fim Pele Pulso */