/* =============================================================
   Gastro — /app (produto funcional da PoC)
   Reaproveita tokens e componentes de /style.css.
   ============================================================= */

.app-body{ background: var(--surface); }

.app-main{
  max-width: 1100px;
  margin: 0 auto;
  /* Safe-area lateral: preserva 32px de conforto em telas sem notch, mas
     respeita o inset devolvido pelo user-agent em iPhone Pro landscape. */
  padding: 36px
    max(env(safe-area-inset-right, 0px), 32px)
    96px
    max(env(safe-area-inset-left, 0px), 32px);
}

/* ---------- As duas frentes (planta da casa) ---------- */
/* Discreta de propósito: é orientação, não chamada. Se competisse com o
   título da página viraria uma terceira coisa pra decidir — e o problema
   que ela resolve é justamente o excesso de decisão na primeira tela. */
/* ---- A casa, no alto ----
   A primeira linha do painel de controle da operação: de quem é este trabalho.
   Fica acima das duas frentes porque a identidade vem antes do estado — e
   porque a ficha precisava de uma porta na tela, não só dentro do menu da
   conta. Peso visual baixo de propósito: é um cabeçalho, não um card. */
.painel{
  max-width: var(--col-bancada); margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 10px;
  /* O fio da casa fecha a identidade. Dois traços: a borda que separa e o
     dourado que assina. */
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--accent-soft);
}
[hidden].painel{ display: none !important; }
.painel__casa{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
/* O SALÃO CHEGA NA BANCADA — e é aqui, e não em outro lugar.

   O desenho existia em três superfícies (a porta pública, a tela de entrar e
   a capa do PDF) e em NENHUMA das telas de trabalho: quem já tem análise na
   conta nunca via traço nenhum, porque a .mesa-posta some em
   [data-mode="analisado"]. Ou seja: o dono via o desenho no dia em que
   assinou e nunca mais. Ele mora na identidade da casa porque é isso que ele
   é — a planta DAQUELA casa, ao lado do nome dela.

   Assinatura, não ilustração: 104px, ao lado do nome, uma vez por tela. Não
   se repete nas outras frentes; traço escasso é o que sustenta a régua de
   "traço, nunca foto". */
.painel__salao{
  flex: none; width: 140px; margin: 0; padding: 0;
  line-height: 0;
}
/* O QUE SAI DO DESENHO NO TAMANHO DE ASSINATURA — e por quê.

   Primeira tentativa: tirar os LUGARES (as banquetas e as cadeiras) porque
   3,4px de raio viram poeira. Errado, e a verificação cega pegou: sem os
   lugares as mesas viram círculos vazios soltos, e a planta inteira passa a
   se ler como wireframe — "imagem quebrada", nas palavras de quem olhou sem
   saber o que era. O lugar é justamente o que faz um círculo virar mesa.

   O que de fato quebra neste tamanho é a PORTA. A folha é um retângulo de 6px
   preenchido que encosta na linha da parede e, com o traço proporcional, o
   escuro dela transborda a borda arredondada — vira um risco solto atravessando
   o canto. E a varredura, que é um arco pontilhado finíssimo, some ou aparece
   como cisco. As duas saem: sobra o salão fechado, que é o que precisa se ler.
   A porta continua inteira nas superfícies onde o desenho é grande. */
.painel__salao svg .salao__folha,
.painel__salao svg .salao__varredura,
.painel__salao svg .salao__tampo,
.painel__salao svg .salao__risco{ display: none; }
.painel__salao svg{ width: 100%; height: auto; }
.painel__salao svg :where(path, rect, circle){
  fill: none; stroke: var(--primary); stroke-opacity: 0.34;
  stroke-width: 1.4; vector-effect: non-scaling-stroke;
}
.painel__salao svg .salao__piso{ fill: rgba(201,169,97,0.06); stroke: none; }
.painel__salao svg .salao__parede{ stroke-opacity: 0.42; stroke-width: 1.6; }
.painel__salao svg .salao__bancada rect,
.painel__salao svg .salao__passagem rect{ fill: var(--primary-04); }
.painel__salao svg .salao__lugar{ stroke-opacity: 0.30; stroke-width: 1.1; }
/* As duas mesas no dourado da casa: o gesto do produto (algumas mesas pagam a
   conta, outras não) dito antes de qualquer palavra. Mesmo tratamento das
   outras três superfícies. */
.painel__salao svg .salao__mesa--viva{
  stroke: var(--accent); stroke-opacity: 0.85; fill: var(--accent-soft);
}
/* Em tela estreita a identidade é o nome, não o desenho: 104px de planta
   comeriam a linha inteira do nome da casa. */
@media (max-width: 720px){ .painel__salao{ display: none; } }

/* A MARCA DA CASA, no lugar da planta.
   Altura fixa e largura livre: logotipo de restaurante vem em toda proporção
   (brasão quadrado, lettering deitado, selo redondo), e travar a LARGURA
   deixaria o lettering ilegível e o brasão gigante. Travando a altura, todos
   ocupam a mesma faixa da linha do nome — que é o que faz a tela continuar
   sendo uma tela, e não uma vitrine de logotipos de tamanhos diferentes. */
.painel__marca{
  flex: none;
  height: 56px; width: auto; max-width: 200px;
  object-fit: contain; object-position: left center;
  display: block;
}
.painel__marca[hidden]{ display: none; }
@media (max-width: 720px){ .painel__marca{ height: 40px; max-width: 150px; } }

/* ---------- A marca, no formulário da ficha ---------- */
.marca__linha{ display: flex; align-items: center; gap: 14px; margin-top: 6px; }
/* A prévia tem a moldura do que ela vai virar: mesma caixa, mesma altura da
   marca no alto da tela. O dono vê o resultado, não um thumbnail. */
.marca__previa{
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 132px; height: 62px; padding: 4px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.marca__previa[data-vazio="0"]{ border-style: solid; background: var(--paper); }
.marca__previa img{ max-width: 100%; max-height: 100%; object-fit: contain; }
.marca__previa-vazia{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.marca__acoes{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* O <label> faz o papel do botão porque é ele que abre o seletor de arquivo
   sem uma linha de JS — e precisa parecer botão, inclusive no cursor. */
.marca__botao{ cursor: pointer; }
.marca__tirar{
  border: none; background: none; padding: 0; cursor: pointer;
  font-size: var(--fs-xs); color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.marca__tirar:hover{ color: var(--danger); }

/* ---------- A marca na capa do relatório ---------- */
/* Na régua do topo, encostada à direita, de frente pro nosso lockup. Altura
   travada e largura livre, como no alto da tela: logotipo de restaurante vem em
   toda proporção, e travar a largura deixaria o lettering ilegível.
   `margin-left:auto` é o que a empurra pro lado oposto dentro do flex do topo. */
.pdf-cover__marca{
  height: 44px; width: auto; max-width: 190px;
  object-fit: contain; object-position: right center;
  margin-left: auto;
}
.pdf-cover__marca[hidden]{ display: none !important; }

/* margin-right auto: o desenho e o nome ficam juntos à esquerda, e as ações
   da casa continuam na borda direita. */
.painel__id{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; margin-right: auto; }
/* O nome da casa é o título da tela — e estava em 1.14rem de texto corrido,
   menor que o título do bloco de passos logo abaixo. Display, como todo
   título do produto. */
.painel__nome{
  font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
}
/* Casa ainda sem nome escolhido pelo dono: o rótulo neutro não pode se passar
   por nome próprio. */
.painel__nome[data-anonima="1"]{ color: var(--muted); font-weight: 500; }
.painel__local{ font-size: var(--fs-sm); color: var(--muted); }
.painel__ficha{
  flex: none;
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--r-sm); padding: 5px 11px; cursor: pointer;
  font-size: var(--fs-xs); color: var(--ink);
}
.painel__ficha:hover{ border-color: var(--primary); }
/* A pendência: frase de consequência que leva ao lugar de resolver. Não é
   alarme — nada quebrou; a comparação é que sai menos precisa. */
.painel__falta{
  text-align: left; width: 100%;
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--r-sm); padding: 9px 12px; cursor: pointer;
  background: var(--paper); color: var(--muted);
  font-size: var(--fs-sm); line-height: 1.45; font-family: inherit;
}
.painel__falta:hover{ border-color: var(--primary); color: var(--ink); }
[hidden].painel__falta{ display: none !important; }
[hidden].painel__ficha{ display: none !important; }

.painel__acoes{ display: flex; align-items: center; gap: 8px; flex: none; }
/* Abrir a próxima operação é um gesto raro e de baixa urgência: fica em texto,
   não em botão de peso. Quem tem uma casa só não pode ler isto como o que o
   app quer que ele faça agora. */
.painel__nova{
  border: 0; background: none; padding: 5px 2px; cursor: pointer;
  font-size: var(--fs-xs); color: var(--muted); font-family: inherit;
}
.painel__nova:hover{ color: var(--primary); text-decoration: underline; }

/* ---- A lista de operações ----
   Uma linha por casa, com o estado real de cada uma. A casa em que o dono está
   fica marcada — sem isso, uma rede de oito casas vira oito nomes iguais e ele
   perde a noção de onde está trabalhando. */
.painel__rede{ margin-top: 2px; }
[hidden].painel__rede{ display: none !important; }
.painel__casas{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.painel__casa-btn{
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 9px 12px; background: var(--paper);
  transition: border-color .18s var(--ease);
}
.painel__casa-btn:hover{ border-color: var(--primary); border-left-color: var(--primary); }
.painel__casa-btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.painel__casa-item.is-atual .painel__casa-btn{ border-left-color: var(--primary); }
.painel__casa-nome{
  font-size: var(--fs-md); font-weight: 600; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
/* "Você está aqui" em palavra, não em cor: a marca precisa ser lida, não
   decodificada — e cor sozinha não chega a quem não a distingue. */
.painel__casa-aqui{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary); font-weight: 500;
}
.painel__casa-local{ font-size: var(--fs-xs); color: var(--muted); grid-column: 1; }
.painel__casa-estado{
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: var(--fs-xs); color: var(--muted); text-align: right; white-space: nowrap;
}

/* O próximo passo: convite, nunca alarme. Mesma família da pendência da ficha,
   um tom mais leve — ele fala do futuro, ela fala do que já está torto. */
.painel__passo{
  text-align: left; width: 100%; cursor: pointer; font-family: inherit;
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
  padding: 9px 12px; background: none; color: var(--muted);
  font-size: var(--fs-sm); line-height: 1.45;
}
.painel__passo:hover{ border-color: var(--primary); color: var(--ink); }
[hidden].painel__passo{ display: none !important; }

/* ---------- O QUE DECIDIR HOJE ----------
   A referência que motivou o bloco é um painel escuro de terminal financeiro.
   O que veio de lá é a ESTRUTURA — decisão nomeada, dinheiro em corpo grande,
   contagem embaixo, porta de saída — e não a pele: um retângulo preto no alto
   de uma página bege-papel seria um segundo produto colado no primeiro. Aqui o
   destaque vem do peso do número e da barra lateral de tom, que é a mesma
   gramática que o relatório já usa (ver .report-lede[data-tone]).

   O número é display serif e grande porque é o único elemento da primeira tela
   que precisa ser lido de longe — é ele que decide se a pessoa entra ou fecha
   o app. Tudo à volta é deliberadamente pequeno. */
/* ---- Os seus primeiros passos ----
   O corredor do primeiro login até a matriz acender. Mesma largura e mesmo
   peso do "O que decidir hoje" de propósito: ocupam o mesmo lugar na página e
   um substitui o outro conforme a casa sai do zero. Ver
   renderPrimeirosPassos() no app.js. */
/* A ABERTURA PASSA A SER PAPEL, COMO O RESTO DO PRODUTO.
   Até aqui os cinco passos eram linhas soltas direto sobre o fundo — a única
   superfície do produto sem cartão. A porta pública, a tela de entrar e o
   relatório inteiro são feitos de papel sobre bege com o fio dourado à
   esquerda; a tela que o dono abre todo dia era a exceção. Mesma régua do
   cartão da entrada (.proof__card): papel, borda fina, fio da casa. */
.passos{
  max-width: var(--col-bancada); margin: 0 0 22px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 16px 24px;
}
[hidden].passos{ display: none !important; }
/* A TRILHA ENCOLHE QUANDO JÁ HÁ RESPOSTA EM CIMA.
   Aberta, ela é o conteúdo da tela (a casa ainda não tem decisão medida).
   Fechada, é uma linha só — e a linha continua dizendo em quantos passos a
   pessoa está, que é a única coisa que ela precisa saber de relance. */
.passos__head{
  cursor: pointer;
  list-style: none;
  align-items: center;
  /* A seta anda com o título, sempre. Herdando o flex-wrap do cabeçalho, no
     aparelho ela descia sozinha pra uma terceira linha, embaixo da linha de
     estado — uma seta órfã no rodapé de um cartão fechado não se lê como
     "abre aqui". */
  flex-wrap: nowrap;
  gap: 14px;
}
.passos__titulo-linha{ flex: 1 1 auto; min-width: 0; }
.passos__head::-webkit-details-marker{ display: none; }
.passos__head:focus-visible{ outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--r-sm); }
.passos__titulo-linha{
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0;
}
.passos__chevron{
  flex: none; color: var(--muted);
  transition: transform .18s var(--ease);
}
.passos[open] .passos__chevron{ transform: rotate(180deg); }
/* Fechada: o cartão vira uma faixa. O título desce de display 1.5rem pra
   corpo, porque fechado ele não é o assunto da tela — é o lembrete de que
   existe um caminho, e o assunto está acima dele. */
.passos:not([open]){ padding: 12px 24px; }
.passos:not([open]) .passos__title{
  font-family: var(--font-text);
  font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.005em;
}
/* A caixa cresceu até a coluna inteira; a LINHA DE LEITURA não acompanha.
   Prosa em 1.100px é linha que o olho perde na volta. */
.passos__why{ max-width: var(--col-texto); }
.passos__head{ display: flex; justify-content: space-between; }
.passos__title{
  margin: 0; font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
}
.passos__strip{
  margin: 0; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.passos__lista{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.passos__item{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--border);
}
.passos__item:first-child{ border-top: none; }
/* O DESENHO DO PASSO — a coisa que ele nomeia, no traço da casa.

   Numa lista de cinco linhas, é o desenho que deixa o dono achar de relance
   onde ele parou, sem reler os cinco rótulos. Herda a cor do estado do passo
   (apagado no que já foi, cheio no da vez), então não tem cor própria: quem
   manda é o mesmo `data-estado` que já governa o resto da linha. */
.passos__ico{
  flex: none;
  width: 22px; height: 23px; margin-top: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--primary);
  opacity: 0.45;
}
.passos__item[data-estado="agora"] .passos__ico{ color: var(--accent); opacity: 1; stroke-width: 1.6; }
.passos__item[data-estado="feito"] .passos__ico{ opacity: 0.28; }
@media (max-width: 560px){
  /* No celular o desenho sai: 22px a mais na frente de cada linha empurram o
     rótulo pra duas linhas, e aí o desenho custa mais do que entrega. */
  .passos__ico{ display: none; }
}
/* A marca de estado. Círculo vazado pro que ainda não aconteceu, cheio pro que
   já foi — sem ícone e sem cor de alarme: nada aqui está errado, só ainda não
   foi feito. */
.passos__mark{
  flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted);
}
.passos__item[data-estado="feito"] .passos__mark{
  border-color: var(--primary); background: var(--primary); color: var(--surface);
}
.passos__item[data-estado="agora"] .passos__mark{ border-color: var(--primary); color: var(--primary); }
.passos__corpo{ min-width: 0; flex: 1; }
.passos__label{ font-size: var(--fs-md); color: var(--muted); line-height: 1.4; }
/* Só o passo da vez fala em voz alta. Os outros existem pra dar noção de
   caminho, não pra disputar a atenção. */
.passos__item[data-estado="agora"] .passos__label{ color: var(--ink); font-weight: 600; }
.passos__item[data-estado="feito"] .passos__label{ color: var(--muted); }
.passos__why{ margin: 3px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.passos__cta{
  margin-top: 7px; display: inline-block;
  border: 1px solid var(--primary); background: var(--primary); color: var(--surface);
  border-radius: var(--r-sm); padding: 7px 14px; cursor: pointer;
  font-size: var(--fs-sm); font-family: inherit; font-weight: 500;
}
.passos__cta:hover{ opacity: 0.9; }
.passos__cta:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }

/* ---- A língua em que a pessoa lê ----
   O convite das quatro perguntas e a tela de ajustes do menu da conta são o
   MESMO pop-up, com o cabeçalho reescrito — ver abrirTrocaDeLingua() no app.js.
   Uma segunda marcação para a mesma pergunta é como as duas telas passam a
   perguntar coisas diferentes.

   POR QUE POP-UP, e não um bloco da coluna: como seção, ele não pertencia a
   nenhuma das quatro frentes, então ficava de pé em todas — e com altura maior
   que a janela ele era a única coisa visível em qualquer uma delas. Trocar de
   tela deixava de mudar a tela (reporte de 17/08). Aqui ele tem uma camada só
   pra ele, sai com um gesto e devolve a coluna ao trabalho.

   O corpo herda .modal/.modal__head/.modal__body do padrão de modal do app —
   incluindo o bottom sheet do celular. Só o que é da língua vive abaixo. */
/* O cartão é uma coluna com o miolo rolando por dentro: numa janela de 738px
   as quatro perguntas não cabem, e se a rolagem fosse do cartão inteiro o
   rodapé desceria junto — a pessoa veria as perguntas sem ver que existe um
   botão pra gravar e um "pular" pra sair. Cabeçalho e rodapé ficam. */
.modal--lingua{
  max-width: 560px;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal--lingua .modal__head, .modal--lingua .lingua__foot{ flex: none; }
.modal--lingua .modal__body{ overflow-y: auto; min-height: 0; }
.lingua__eyebrow{
  display: block; margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
/* No modo ajustes o eyebrow some (não é mais "antes de começar"): esconder por
   texto vazio deixaria o vão do margin-bottom. */
.lingua__eyebrow:empty{ display: none; }
#lingua .modal__subtitle{ line-height: 1.5; }

/* Quem está na conta. Não é campo: nome e e-mail vêm do login e não se digitam
   aqui — prometer edição do que não se pode gravar é pior que não mostrar. */
.lingua__identidade{
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border);
}
/* display de autor vence o [hidden] do navegador — sem esta linha o bloco
   escondido continua na tela, como uma caixa vazia no alto do convite. */
[hidden].lingua__identidade{ display: none !important; }
.lingua__identidade-nome{ font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.lingua__identidade-email{ font-size: var(--fs-sm); color: var(--muted); }

/* A porta pra ficha da operação. Mesmo desenho dos níveis: é uma escolha, não
   um botão de ação — quem clica vai pra outra tela, não grava nada aqui. */
.lingua__operacao{
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  padding: 10px 12px; cursor: pointer; font-family: inherit;
}
[hidden].lingua__operacao{ display: none !important; }
.lingua__operacao:hover{ border-color: var(--border-strong); }
.lingua__operacao-nome{ font-size: var(--fs-md); font-weight: 600; }
.lingua__operacao-sub{ font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }

/* A escolha direta de nível, só na tela de troca. Vem antes das perguntas
   porque é o caminho curto de quem já sabe o que quer — responder quatro
   perguntas pra pedir "a versão sem explicação" seria pedágio. */
.lingua__niveis{ display: flex; flex-direction: column; gap: 6px; }
.lingua__nivel{
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  padding: 10px 12px; cursor: pointer; font-family: inherit;
}
.lingua__nivel:hover{ border-color: var(--border-strong); }
.lingua__nivel[aria-pressed="true"]{ border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.lingua__nivel-nome{ font-size: var(--fs-md); font-weight: 600; }
.lingua__nivel-sub{ font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }

.lingua__perguntas{ display: flex; flex-direction: column; gap: 16px; }
.lingua__q{ border: none; margin: 0; padding: 0; min-width: 0; }
.lingua__q-titulo{ padding: 0; font-size: var(--fs-md); font-weight: 600; color: var(--ink); line-height: 1.4; }
.lingua__q-apoio{ margin: 3px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.lingua__opcoes{ margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
/* Sem numeração, sem escala de 1 a 5, sem cor de certo e errado: as três
   opções têm exatamente o mesmo peso visual. Uma delas parecendo "a melhor
   resposta" transformaria o convite numa prova. */
.lingua__opcao{
  text-align: left; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  padding: 9px 12px; cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); line-height: 1.4;
}
.lingua__opcao:hover{ border-color: var(--border-strong); }
.lingua__opcao[aria-pressed="true"]{ border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.lingua__opcao:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
/* O rodapé do pop-up. "Pular" fica na ponta oposta do botão que grava: são
   gestos contrários, e vizinhos eles viram clique errado. */
.lingua__foot{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 22px 18px; border-top: 1px solid var(--border);
}
.lingua__foot-gap{ flex: 1 1 auto; }
.lingua__skip{
  border: none; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); color: var(--muted); text-decoration: underline;
}
.lingua__status{ margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }

/* ---- O vocabulário, dentro das telas ----
   O termo técnico encolhido ao lado do nome fácil. Ele NÃO some no básico de
   propósito: é a palavra que o contador, o fornecedor e o sócio vão usar, e
   escondê-la aqui só adiaria a primeira vez que ela aparece sem tradução em
   algum outro lugar. Ver aplicarLingua() no app.js. */
.termo__tec{
  font-family: var(--font-mono); font-size: 0.78em;
  color: var(--muted); font-weight: 400; letter-spacing: 0.01em;
  white-space: nowrap;
}
/* A linha de explicação. Bloco, sempre embaixo do rótulo, e some inteira no
   avançado — que é, por definição, a tela de hoje. */
.termo__explica{
  display: block; margin-top: 3px;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--muted);
  font-weight: 400; text-transform: none; letter-spacing: normal; max-width: 58ch;
}
html[data-lingua="avancado"] .termo__explica{ display: none; }
/* Dentro de rótulo em caixa-alta (o eyebrow de um cartão), a explicação volta
   ao texto normal: caixa-alta é marca de rótulo curto e uma frase inteira
   assim não se lê. */
.fin-hero__label .termo__explica,
.fin-kpi__label .termo__explica,
.breakeven__eyebrow .termo__explica{ text-transform: none; }
@media print{
  /* No PDF a explicação não vai: o documento é peça de reunião, e a mesma
     frase repetida em quinze blocos vira parede de texto impressa. */
  .termo__explica{ display: none; }
}

.hoje{
  max-width: var(--col-bancada); margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 14px;
}
[hidden].hoje{ display: none !important; }

.hoje__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hoje__title{
  margin: 0; font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
}
/* A faixa conta o que já foi lido — nunca um total das decisões. Ver
   hojeFaixa() no app.js: somar dinheiros de naturezas diferentes é o erro que
   este bloco não pode cometer. */
.hoje__strip{
  margin: 0; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}

.hoje__groups{ display: flex; flex-direction: column; gap: 18px; }
.hoje__grupo{ display: flex; flex-direction: column; gap: 8px; }
.hoje__grupo-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hoje__grupo-titulo{
  margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
}
.hoje__grupo-nota{ font-size: var(--fs-xs); color: var(--muted); }

.hoje__cards{
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.hoje__card{
  display: flex; flex-direction: column; gap: 4px;
  background: var(--paper);
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
  border-radius: var(--r-md); padding: 14px 16px 12px;
}
/* Só a barra lateral carrega o tom. A cor nunca é a única portadora do
   sentido — o título e o rótulo já dizem por escrito o que a barra pinta. */
.hoje__card[data-tone="oportunidade"]{ border-left-color: var(--accent); }
.hoje__card[data-tone="atencao"]{ border-left-color: var(--accent); }
.hoje__card[data-tone="alerta"]{ border-left-color: var(--danger); }

.hoje__card-titulo{
  margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: 1.35;
}
.hoje__num{ margin: 2px 0 0; display: flex; align-items: baseline; gap: 3px; }
.hoje__valor{
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1.05;
}
.hoje__card[data-tone="alerta"] .hoje__valor{ color: var(--danger); }
.hoje__unidade{ font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.hoje__rotulo{ margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.hoje__linha{
  margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--ink); line-height: 1.4;
}
/* De quando é a leitura que sustenta o número. Mesma régua do carimbo do painel
   de acompanhamento (.visao__card-ref): na abertura do app o relatório não está
   na tela, e um espaço de preço lido há três semanas não pode ter a mesma cara
   de agora. */
.hoje__ref{
  margin-top: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.hoje__cta{
  margin-top: 8px; align-self: flex-start;
  border: 0; background: none; padding: 2px 0; cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); font-weight: 600; color: var(--primary);
}
.hoje__cta:hover{ text-decoration: underline; }
.hoje__cta:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }

.hoje__gap{
  margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45;
  border-left: 2px solid var(--border-strong); padding-left: 10px;
}
[hidden].hoje__gap{ display: none !important; }

/* ---- Visão geral da operação (a quarta frente) ----
   O painel de acompanhamento. O cartão de indicador NÃO é peça nova: é o
   mesmo `.closes__panel` da curva do mês, com dois acréscimos (o rótulo do que
   o número quer dizer e o carimbo de quando ele é). Inventar um segundo cartão
   de indicador faria o mesmo CMV ter duas caras conforme a tela — e o dono
   levaria mais tempo pra reconhecer o próprio número do que pra lê-lo.
   O `.hoje__card` continua sendo outra coisa e não se mistura: lá é decisão
   com dinheiro e chamada pra agir, aqui é estado com porta pro documento. */
.visao{
  max-width: var(--col-bancada); margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 16px;
}
[hidden].visao{ display: none !important; }

.visao__head{ display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.visao__id{ display: flex; flex-direction: column; gap: 3px; }
.visao__title{
  margin: 0; font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: 600; color: var(--ink); letter-spacing: -0.02em;
}
/* A faixa conta o que a casa tem para acompanhar — nunca a soma dos cartões.
   Ver visaoFaixa() no app.js. */
.visao__strip{
  margin: 0; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
/* A falha de gravação da escolha aparece no lugar da faixa, em tom de aviso:
   opção que some em silêncio é o que a casa não pode ter. */
.visao__strip[data-erro="1"]{ text-transform: none; letter-spacing: 0; color: var(--danger); }

.visao__editar{
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  border-radius: var(--r-sm); padding: 6px 12px; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 500;
}
.visao__editar:hover{ border-color: var(--primary); color: var(--primary); }
.visao__editar:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.visao__editar[aria-pressed="true"]{ border-color: var(--primary); background: var(--primary); color: var(--surface); }

/* ---- As operações, quando há mais de uma ---- */
.visao__rede{ display: flex; flex-direction: column; gap: 8px; }
[hidden].visao__rede{ display: none !important; }
.visao__rede-titulo{
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-60); font-weight: 500;
}
.visao__rede-lista{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.visao__rede-btn{
  width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto auto;
  align-items: baseline; gap: 10px; text-align: left;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); padding: 9px 12px; cursor: pointer; font-family: inherit;
}
.visao__rede-btn:hover{ border-color: var(--primary); }
.visao__rede-btn:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.visao__rede-btn[aria-current="true"]{ border-color: var(--primary); background: var(--primary-04); }
.visao__rede-nome{ font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.visao__rede-estado{ font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted); }
.visao__rede-aqui{ font-size: var(--fs-xs); color: var(--primary); font-weight: 500; }

/* ---- A grade ----
   Mesma medida da grade da curva: quatro cartões numa tela larga, e auto-fit
   pra nenhum indicador ficar órfão numa linha só dele. */
.visao__grade{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
}
.visao__card-rotulo{ margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
/* O DESENHO DO INDICADOR, na linha do título.
   Peso baixo de propósito: ele existe pra dar CARA ao cartão de relance, não
   pra competir com o número — que continua sendo a coisa mais forte da caixa.
   Fica à direita porque o olho varre o título da esquerda pra direita e
   encontra o desenho no fim da linha, como um selo. */
.visao__card-topo{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.visao__card-ico{
  flex: none; width: 22px; height: 23px;
  fill: none; stroke: var(--primary); stroke-opacity: 0.30;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
/* O cartão em atenção ou fora da meta acende o próprio desenho: a cor vem do
   estado que o cartão já declara, e não de uma segunda régua. */
.visao__card[data-estado="ruim"] .visao__card-ico{ stroke: var(--danger); stroke-opacity: 0.45; }
.visao__card[data-estado="atencao"] .visao__card-ico{ stroke: var(--accent); stroke-opacity: 0.75; }
.visao__card[data-estado="bom"] .visao__card-ico{ stroke: var(--positive); stroke-opacity: 0.40; }
/* A curva dentro do cartão do painel é menor que a do mês: lá ela é a peça
   principal da leitura, aqui é o rastro que dá forma ao número. */
.visao__card-chart{ margin-top: 8px; }
.visao__card-chart svg{ width: 100%; height: 46px; display: block; }
/* De QUANDO é o número. Sem este carimbo o painel mente por omissão: um mês
   fechado em maio e um cardápio lido há três semanas apareceriam com a mesma
   cara de "agora". */
.visao__card-ref{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
/* Atenção não é erro: o espaço de preço e a distância até a meta são coisas a
   resolver, não contas furadas. Tom da marca, como no `.hoje__card`. */
.visao__card[data-estado="atencao"] .closes__dot{ background: var(--accent); }
.visao__porta{
  margin-top: auto; padding-top: 8px; align-self: flex-start;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  font-size: var(--fs-xs); font-weight: 500; color: var(--muted);
}
/* O cartão inteiro é a porta (15/09): cursor de mão e a borda acende ao passar. */
.visao__card[data-visao-alvo]{ cursor: pointer; }
.visao__card[data-visao-alvo]:hover{ border-color: var(--brand); }
.visao__card[data-visao-alvo]:hover .visao__porta{ color: var(--brand); }
/* As três barrinhas: os últimos meses, o mais recente em cor de ação, a meta
   como traço com o valor escrito. */
.visao__barras{
  position: relative; display: flex; align-items: flex-end; gap: 10px;
  height: 52px; margin-top: 12px; padding: 0 4px;
}
.visao__barra{ flex: 1 1 0; max-width: 44px; background: var(--border-strong); border-radius: 4px 4px 0 0; min-height: 3px; }
.visao__barra.is-atual{ background: var(--brand); }
.visao__meta{
  position: absolute; left: 0; right: 0; border-top: 1px dashed var(--muted);
  font-style: normal; font-size: var(--fs-2xs); color: var(--muted); line-height: 1; text-align: right;
}
.visao__meta b{ position: relative; top: -13px; font-weight: 500; background: var(--surface); padding-left: 4px; }
.visao__barras-rotulos{
  display: flex; gap: 10px; margin-top: 3px; padding: 0 4px;
  font-size: var(--fs-2xs); color: var(--muted);
}
.visao__barras-rotulos span{ flex: 1 1 0; max-width: 44px; text-align: center; }
/* O estado é chip: símbolo + palavra, fundo tonal. */
.visao__card-pe{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.visao__chip{
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 500; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--primary-08); color: var(--muted);
}
.visao__chip[data-estado="bom"]{ background: var(--positive-bg); color: var(--positive); }
.visao__chip[data-estado="ruim"]{ background: var(--danger-bg); color: var(--danger); }
.visao__chip[data-estado="atencao"]{ background: var(--accent-soft); color: var(--gold-ink); }
.visao__porta:hover{ text-decoration: underline; }
.visao__porta:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }

/* No modo de edição o cartão troca a porta pelos gestos — os dois juntos
   dariam ao mesmo cartão dois cliques de efeitos opostos. Botões grandes de
   propósito: isto é usado no celular, em pé, no salão. */
.visao__card-gestos{
  margin-top: auto; padding-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.visao__gesto{
  min-width: 34px; min-height: 32px; padding: 4px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); line-height: 1;
}
.visao__gesto:hover{ border-color: var(--primary); color: var(--primary); }
.visao__gesto:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.visao__gesto--tira{ margin-left: auto; color: var(--muted); }
.visao__gesto--tira:hover{ border-color: var(--danger); color: var(--danger); }

.visao__vazio{
  margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: 16px;
}
[hidden].visao__vazio{ display: none !important; }

/* ---- A banca: o que dá pra acrescentar ----
   Indicador sem dado não some da lista, some do painel: aqui ele aparece
   apagado dizendo o que o acende. É o que faz a customização virar roteiro em
   vez de parede de opções. */
.visao__banca{
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--border); padding-top: 14px;
}
[hidden].visao__banca{ display: none !important; }
.visao__banca-titulo{
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-60); font-weight: 500;
}
.visao__banca-lede{
  margin: -2px 0 2px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
}
[hidden].visao__banca-lede{ display: none !important; }
.visao__banca-lista{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px;
}

/* ---- A banca em repouso ----
   Uma linha por GESTO, não por indicador: sete linhas repetindo "acende quando
   você fechar um mês" faziam um gesto só parecer sete tarefas. Coluna única
   porque a linha é uma frase (o gesto) seguida da lista do que ela acende — e
   frase quebrada em duas colunas de 230px deixa de ser frase. */
.visao__banca-lista[data-modo="repouso"]{ grid-template-columns: 1fr; gap: 6px; }
.visao__banca-grupo{
  display: grid; grid-template-columns: minmax(150px, 0.42fr) 1fr; gap: 4px 16px;
  align-items: baseline;
  border: 1px dashed var(--border); border-radius: var(--r-sm); padding: 9px 12px;
}
.visao__banca-gesto{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.03em;
  color: var(--ink); line-height: 1.45;
}
.visao__banca-nomes{
  display: flex; flex-wrap: wrap; gap: 2px 14px;
}
.visao__banca-nomes .visao__banca-nome{
  font-size: var(--fs-sm); font-weight: 400; color: var(--muted); line-height: 1.5;
}
.visao__banca-nomes i{ font-style: normal; font-size: var(--fs-xs); color: var(--muted); opacity: 0.75; }
.visao__banca-item[data-vazio="1"]{
  display: flex; flex-direction: column; gap: 2px;
  border: 1px dashed var(--border); border-radius: var(--r-sm); padding: 9px 12px;
}
.visao__banca-add{
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); padding: 9px 12px; cursor: pointer;
  font-family: inherit; text-align: left;
}
.visao__banca-add:hover{ border-color: var(--primary); }
.visao__banca-add:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.visao__banca-nome{ font-size: var(--fs-sm); font-weight: 500; color: var(--ink); }
.visao__banca-valor{ font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.visao__banca-item[data-vazio="1"] .visao__banca-nome{ color: var(--muted); font-weight: 400; }
.visao__banca-falta{ font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }

.visao__reset{
  align-self: flex-start; border: 0; background: none; padding: 2px 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); color: var(--muted); text-decoration: underline;
}
.visao__reset:hover{ color: var(--ink); }
.visao__reset:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }

@media (max-width: 560px){
  /* Uma coluna: dois cartões de indicador lado a lado num aparelho de 390px
     quebram o R$ no meio, que é o número que o painel existe pra entregar. */
  .visao__grade, .visao__banca-lista{ grid-template-columns: 1fr; }
  /* No celular o gesto vira o título da linha e o que ele acende cai embaixo:
     150px de rótulo ao lado de 190px de lista quebrariam os dois no meio. */
  .visao__banca-grupo{ grid-template-columns: 1fr; }
  .visao__title{ font-size: var(--fs-xl); }
  .visao__rede-btn{ grid-template-columns: 1fr; }
}

/* No papel o painel não existe: ele é índice de tela, e o documento que se
   imprime é o relatório inteiro, não o atalho pra ele. */
@media print{ .visao{ display: none !important; } }

@media (max-width: 560px){
  /* Uma coluna: dois cartões de 190px lado a lado quebram o R$ no meio, que é
     justamente o número que o bloco existe pra entregar. */
  .hoje__cards{ grid-template-columns: 1fr; }
  .hoje__title{ font-size: var(--fs-xl); }
  .hoje__valor{ font-size: var(--fs-2xl); }
}

@media (max-width: 560px){
  .painel__casa{ align-items: flex-start; }
  .painel__id{ flex-direction: column; gap: 2px; }
  /* No celular o estado desce pra baixo do nome: espremer três colunas num
     aparelho de 390px quebraria o número no meio. */
  .painel__casa-btn{ grid-template-columns: 1fr; }
  .painel__casa-estado{ grid-column: 1; grid-row: auto; text-align: left; white-space: normal; }
}

/* Quatro telas, uma aberta por vez. A frente que não está aberta sai do fluxo —
   não é rolagem escondida, é outra tela. Só na tela: no papel cada frente tem
   a própria folha (ver "O PAPEL DE CADA FRENTE" em @media print).

   NOTA HISTÓRICA, porque a razão original desta regra deixou de valer. Ela era
   só-tela pra que imprimir do lado do mês ainda entregasse o relatório do
   CARDÁPIO — a única peça que tinha papel. O efeito colateral aparecia na casa
   que tinha mês fechado e nenhum cardápio analisado: `#result` vazio, e o PDF
   saía com cabeçalho, rodapé e nada entre os dois. Agora o mês tem folha
   própria e imprime a si mesmo.
   A regra é escrita por EXCLUSÃO (esconde o que não é da frente aberta) em vez
   de par a par: com três frentes, a lista par a par vira seis linhas e a
   próxima frente que entrar exige mexer em todas elas. */
@media screen{
  .app-col[data-frente="visao"] [data-front]:not([data-front="visao"]),
  .app-col[data-frente="cardapio"] [data-front]:not([data-front="cardapio"]),
  .app-col[data-frente="mes"] [data-front]:not([data-front="mes"]),
  .app-col[data-frente="conversa"] [data-front]:not([data-front="conversa"]){ display: none !important; }

  /* CADA FRENTE ABRE COM O ASSUNTO DELA.

     A decisão do dia e a trilha de primeiros passos nasceram FORA das frentes,
     de propósito: "a decisão é da operação, não da tela em que a pessoa está".
     Isso se sustentava enquanto as duas viviam abaixo da dobra. Quando o
     dinheiro subiu pro alto (26/08), elas passaram a ocupar a primeira tela de
     TODAS as frentes — e o efeito foi que "Pra onde a casa está indo" abria com
     um número de CARDÁPIO, e "Converse sobre a operação" abria com o mesmo
     cartão e o mesmo checklist antes da caixa de perguntar. Duas telas sem
     primeira tela própria, herdando a da vizinha.

     Elas ficam nas duas frentes onde são o assunto: a visão geral (que é o
     painel de estado) e o preço e cardápio (que é onde a decisão vira gesto).
     Na frente do mês, o assunto é o mês; na da conversa, é a conversa.

     O `.painel` NÃO entra nesta regra: a identidade da casa é de todas as
     telas, e é ela que diz de quem é o trabalho em qualquer uma delas. */
  .app-col[data-frente="mes"] .hoje,
  .app-col[data-frente="mes"] .passos,
  .app-col[data-frente="conversa"] .hoje,
  .app-col[data-frente="conversa"] .passos{ display: none !important; }

  /* UM TOPO SÓ (auditoria de 15/09). Com Início na conta, a decisão do dia e
     a trilha ficam SÓ nele: o Cardápio abria com o mesmo cartão, o mesmo
     checklist e os mesmos avisos que a pessoa acabou de ver — "cliquei numa
     aba diferente e a tela não mudou". Nas outras três telas o painel da
     casa vira uma linha (nome · lugar): a identidade continua, o resto é
     assunto do Início. Sem Início (conta nova), nada muda: o Cardápio é a
     primeira tela e leva a trilha. */
  .app-col[data-tem-visao="1"][data-frente="cardapio"] .hoje,
  .app-col[data-tem-visao="1"][data-frente="cardapio"] .passos{ display: none !important; }
  .app-col[data-tem-visao="1"]:not([data-frente="visao"]) .painel{
    margin-bottom: 10px; padding-bottom: 8px; gap: 0;
  }
  .app-col[data-tem-visao="1"]:not([data-frente="visao"]) .painel__salao,
  .app-col[data-tem-visao="1"]:not([data-frente="visao"]) .painel__acoes,
  .app-col[data-tem-visao="1"]:not([data-frente="visao"]) .painel__falta,
  .app-col[data-tem-visao="1"]:not([data-frente="visao"]) .painel__passo,
  .app-col[data-tem-visao="1"]:not([data-frente="visao"]) .painel__rede{ display: none !important; }
  .app-col[data-tem-visao="1"]:not([data-frente="visao"]) .painel__marca{ height: 28px; max-width: 110px; }
  .app-col[data-tem-visao="1"]:not([data-frente="visao"]) .painel__id{ flex-direction: row; align-items: baseline; gap: 10px; }
  .app-col[data-tem-visao="1"]:not([data-frente="visao"]) .painel__nome{ font-size: var(--fs-lg); }
}
/* No celular o aviso vira chip: só a cabeça ("Falta endereço na ficha",
   "Agosto ainda não fechou"); a consequência fica no computador. */
@media (max-width: 720px){
  .painel__aviso-resto{ display: none; }
  .painel__falta, .painel__passo{ padding: 7px 11px; font-size: var(--fs-xs); }
  .painel__falta .painel__aviso-cabeca, .painel__passo .painel__aviso-cabeca{ color: var(--ink); }
}
/* No papel a conversa não existe: é discussão de tela, não peça de documento.
   Sem isto, mandar imprimir o relatório com a frente de conversa aberta sairia
   com o fio de perguntas no lugar da análise. */
@media print{
  .conversa{ display: none !important; }
}

/* ============ O PAPEL DE CADA FRENTE ============
   A folha de impressão nasceu em volta do relatório do cardápio: esconde TUDO
   (`body *`) e libera só `#result`. A regra é boa — bloco novo do app nunca
   vaza pro PDF sozinho —, mas ela só conhecia uma peça. Mandar imprimir com a
   frente do mês aberta devolvia o relatório do cardápio; e na casa que ainda
   não analisou cardápio nenhum, devolvia papel em branco.

   Pra quem responde para cima isso não é acabamento que falta: o fechamento
   mensal É um documento. Vai pra reunião de sócio, vai por e-mail pro operador
   da casa, vira anexo. Leitura que não sai da tela não entra no processo.

   `:has()` porque a decisão é do estado da COLUNA (que frente está aberta) e o
   que precisa sumir mora fora dela — cabeçalho, rodapé, painel da casa.

   E aqui o recorte é por DISPLAY, não por visibilidade: `visibility:hidden`
   preserva o espaço, e o cabeçalho invisível empurraria o mês pra segunda
   página. O `#result` sai junto — senão ele viria, absoluto, por cima do mês. */
@media print{
  body:has(.app-col[data-frente="mes"]) > *:not(.app-main),
  body:has(.app-col[data-frente="mes"]) .app-main > *:not(.app-col),
  body:has(.app-col[data-frente="mes"]) .app-col > *:not([data-front="mes"]){
    display: none !important;
  }
  body:has(.app-col[data-frente="mes"]) [data-front="mes"],
  body:has(.app-col[data-frente="mes"]) [data-front="mes"] *{
    visibility: visible !important;
  }
  /* Sem a moldura da tela: no papel a peça começa na margem da folha. */
  body:has(.app-col[data-frente="mes"]) .app-main,
  body:has(.app-col[data-frente="mes"]) .app-col{
    display: block !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
  }
  body:has(.app-col[data-frente="mes"]) #closes,
  body:has(.app-col[data-frente="mes"]) #negocio,
  body:has(.app-col[data-frente="mes"]) #network{
    border: none !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 0 14px !important;
    background: #fff !important;
  }

  /* O que é GESTO não vira documento. Um relatório impresso com campos de
     digitação vazios no meio parece rascunho — e quem recebe não sabe se
     aquilo é dado que faltou ou formulário que sobrou. */
  #closes-form, #closes-error, #closes-entries, #closes-bulk, #closes-empty,
  #semana-form, #semana-error, #closes-fim,
  #closes .closes__actions{
    display: none !important;
  }

  /* O cabeçalho da SEÇÃO é convite de tela ("feche o mês, leva um minuto") e
     não abertura de documento. Quem recebe o PDF não vai fechar mês nenhum —
     ele quer o número. A capa impressa entra no lugar. */
  #closes > .closes__head{ display: none !important; }
  .semana__lede{ display: none !important; }

  /* Semana sem leitura é só o convite dela. No papel isso vira um título
     seguido de nada, que é a assinatura de um PDF mal feito. */
  #semana:not([data-lido="1"]){ display: none !important; }

  /* Cada leitura do mês inteira na sua folha: bloco cortado no meio da frase
     é o que faz um PDF parecer captura de tela. */
  #semana, #closes-lede, #caminho, #desvio, #anoano, #conta,
  #closes-charts, #closes-table-wrap{
    break-inside: avoid; page-break-inside: avoid;
  }
}

.frentes{
  display: flex; flex-direction: column; gap: 4px;
  margin: 0 0 24px;
}
.frentes__item{
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px;
  border-left: 2px solid var(--border);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  text-decoration: none;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.frentes__item:hover{ border-left-color: var(--primary); background: var(--primary-04); }
.frentes__item:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
/* A frente aberta: faixa acesa e nome em tinta cheia. Saber onde se está vale
   mais do que saber para onde ir — e a marca não depende só de cor. */
.frentes__item[aria-current="page"]{
  border-left-color: var(--brand); background: var(--primary-04);
}
.frentes__label{
  color: var(--muted); font-size: var(--fs-sm); font-weight: 500; line-height: 1.3;
}
.frentes__ico{ display: none; }
.frentes__item[aria-current="page"] .frentes__label{ color: var(--ink); font-weight: 600; }
.frentes__state{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.02em;
  line-height: 1.35; color: var(--muted);
}
/* Estado preenchido é informação, estado vazio é convite — e os dois se
   leem sem depender de cor. */
.frentes__state[data-cheio="1"]{ color: var(--primary); }

/* O passo a passo no menu: mesma linha das frentes, sem estado de conteúdo —
   ele nunca "enche". Um fio acima separa o que é tela do que é ajuda. */
.frentes__item--guia{ margin-top: 8px; border-left-style: dashed; }

/* O TRILHO NO COMPUTADOR (auditoria de 15/09, "Google como aplicação"): os
   mesmos quatro ícones da barra do celular, um rótulo de uma palavra, e mais
   nada — o subtítulo de estado ("4 indicadores na tela", "3 meses fechados ·
   curva acesa") era a coluna inteira de texto miúdo que fazia o trilho parecer
   uma lista de links; o estado se lê dentro de cada tela. Só na tela larga: no
   celular a barra embaixo já tem a regra própria. */
@media screen and (min-width: 721px){
  .frentes{ gap: 2px; }
  .frentes__item{
    flex-direction: row; align-items: center; gap: 10px;
    padding: 9px 12px 9px 10px;
  }
  .frentes__ico{
    display: block; width: 20px; height: 20px; flex: none;
    fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .frentes__item[aria-current="page"] .frentes__ico{ stroke: var(--brand); stroke-width: 2.1; }
  .frentes__label{ font-size: var(--fs-md); }
  .frentes__state{ display: none; }
  .frentes__item--guia{ margin-top: 12px; }
}

/* O QUE FALA DO FUTURO OU DE VAIDADE SAI DA TELA (auditoria de 15/09, "cortar
   ~1 tela por frente"): a lista do que o painel "ainda vai acompanhar", a
   linha "1 decisão com número na mão · 10 pratos · 3 meses fechados" e a
   contagem "4 de 6 indicadores na tela". O botão de escolher indicadores
   fica — é um gesto, não uma lista. Os cartões do Fechamento que repetem os
   do Início somem quando o Início existe; no PDF do mês continuam. */
@media screen{
  #visao-banca, #hoje-strip, #visao-strip{ display: none !important; }
  .app-col[data-tem-visao="1"] #closes-charts{ display: none !important; }
  /* O cartão inteiro abre a curva (15/09); o link em texto era a segunda porta
     para o mesmo lugar. */
  .visao__card[data-visao-alvo] .visao__porta{ display: none !important; }
}

/* ---- O CARDÁPIO PRIMEIRO (055; antes "o piloto de cardápio", 053) ----
   Quem entra por convite vê uma frente só. As outras FICAM no menu, como
   "em breve" — decisão do cliente em 16/09: o resto do produto existe, está
   sendo aberto aos poucos, e a pessoa precisa saber que ele vem. O item não
   abre (app.js responde ao clique com o aviso) e a coluna de trabalho fica
   presa no cardápio. */
.frentes__soon{ display: none; }
html[data-piloto="cardapio"] .frentes__item[data-frente="visao"],
html[data-piloto="cardapio"] .frentes__item[data-frente="mes"]{
  cursor: default; opacity: .62;
}
html[data-piloto="cardapio"] .frentes__item[aria-disabled="true"]:hover{ border-left-color: var(--border); background: none; }
html[data-piloto="cardapio"] .frentes__item[aria-disabled="true"] .frentes__state{ display: none; }
html[data-piloto="cardapio"] .frentes__item[aria-disabled="true"] .frentes__soon{
  display: inline-block; align-self: flex-start;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.3; color: var(--brand);
  padding: 1px 6px; border: 1px solid currentColor; border-radius: var(--r-pill);
  white-space: nowrap;
}
/* No trilho do computador (linha: ícone · palavra · etiqueta) a etiqueta não
   pode quebrar em "EM / BREVE" — se o trilho aperta, ela desce pra linha de
   baixo inteira, sob o nome. */
@media screen and (min-width: 721px){
  html[data-piloto="cardapio"] .frentes__item[aria-disabled="true"]{ flex-wrap: wrap; row-gap: 4px; }
  /* Sempre na linha de baixo, alinhada com o nome (o ícone tem 20px + 10px de
     vão): "Início" caberia na mesma linha e os outros não — três jeitos de
     marcar a mesma coisa é pior que um. */
  html[data-piloto="cardapio"] .frentes__item[aria-disabled="true"] .frentes__soon{ flex: 0 0 auto; width: max-content; margin-left: 30px; }
  html[data-piloto="cardapio"] .frentes__item[aria-disabled="true"] .frentes__label{ flex: 0 0 calc(100% - 30px); }
}
/* O aviso do clique: uma linha no pé da tela, que some sozinha. */
.em-breve-aviso{
  position: fixed; left: 50%; bottom: 24px; z-index: 260;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: min(92vw, 520px); padding: 10px 16px;
  background: var(--ink); color: var(--surface);
  font-size: var(--fs-sm); line-height: 1.4; border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.em-breve-aviso.is-on{ opacity: 1; transform: translate(-50%, 0); }

/* ---- A PORTA QUE O DONO ABRE (piloto) ---- */
.abrir{
  margin: 18px 0 0; padding: 18px 20px;
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--paper);
}
.abrir__kicker{ margin: 0 0 4px; font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.abrir__title{ margin: 0 0 8px; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--ink); line-height: 1.3; }
.abrir__text{ margin: 0 0 14px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.abrir__acoes{ display: flex; gap: 10px; flex-wrap: wrap; }
.abrir__acoes[hidden]{ display: none; }
.abrir__feito{ margin: 12px 0 0; font-size: var(--fs-sm); color: var(--ink); }

/* ---- COMO USAR — o passo a passo ---- */
.modal--guia{ max-width: 560px; }
/* O passo a passo vem POR CIMA da ficha da casa na primeira entrada: primeiro
   a pessoa lê o caminho, depois faz o passo 1 — que é justamente a ficha que
   está esperando embaixo. */
#guia-modal{ z-index: 210; }
.guia__lista{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.guia__item{ display: flex; gap: 12px; align-items: flex-start; }
.guia__num{
  flex: none; width: 26px; height: 26px; border-radius: 13px;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.guia__corpo{ display: flex; flex-direction: column; gap: 3px; }
.guia__titulo{ font-size: var(--fs-md); font-weight: 600; color: var(--ink); line-height: 1.35; }
.guia__texto{ font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.guia__nota{
  margin: 4px 0 0; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--primary-04); font-size: var(--fs-sm); color: var(--ink); line-height: 1.5;
}

/* ---- O trilho, no alto à esquerda ----
   O menu só vira faixa na margem esquerda quando a tela tem margem sobrando
   pra isso (1320px pra cima): daí a coluna de trabalho fica com a largura que
   já tinha ou mais, e nenhuma tabela do relatório se aperta pra abrir espaço
   ao menu. Abaixo disso ele volta pro fluxo, no alto — em tela mais estreita
   uma coluna fixa comeria justamente a largura que a leitura precisa.
   Fixo na rolagem: trocar de frente custa o mesmo no fim do relatório e no
   começo. */
@media (min-width: 1320px){
  .app-main{
    max-width: 1380px;
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
  }
  .frentes{
    /* 76px era menos que a faixa do topo (94px): o primeiro item do trilho
       grudava DENTRO do cabeçalho e ficava decapitado em toda tela rolada.
       A altura agora é medida do sistema, e o respiro é explícito. */
    position: sticky; top: calc(var(--h-nav) + 16px);
    margin: 2px 0 0;
  }
}
/* A frente que o ambiente desligou sai do menu inteira — item de menu com
   display:flex ignora o [hidden] do HTML sozinho. */
[hidden].frentes__item{ display: none !important; }

/* Em tela estreita os menus ficam lado a lado: empilhados, empurrariam o
   trabalho pra baixo da dobra logo na abertura — o oposto do que a mudança
   veio resolver. */
@media (max-width: 1319px){
  /* Largura de menu, não de faixa: esticado de ponta a ponta ele viraria a
     peça mais pesada da abertura — e ele é orientação, não chamada.
     Com quatro frentes a faixa cresce mais um tanto, e abaixo de 900px elas
     passam a envolver em duas linhas em vez de espremer o rótulo: "Visão geral
     da operação" quebrado no meio de uma palavra não se lê de relance, que é
     a única coisa que um menu precisa fazer. */
  .frentes{ flex-direction: row; flex-wrap: wrap; gap: 8px; max-width: 900px; }
  .frentes__item{ flex: 1 1 190px; min-width: 0; }
}
@media (max-width: 480px){
  /* De volta ao empilhado — e a base de 190px do trilho lado a lado PRECISA
     sair junto. Ela foi escrita como LARGURA de coluna; com o eixo virado pra
     vertical o mesmo número vira ALTURA, e cada frente abre um vão de 190px
     com o rótulo perdido no alto. No celular o menu é a primeira coisa que se
     vê: quatro caixas ocas empurram a operação inteira pra baixo da dobra. */
  .frentes{ flex-direction: column; gap: 4px; margin-bottom: 20px; }
  .frentes__item{ flex: 0 0 auto; }
}

/* NO CELULAR O MENU VIRA FITA, NÃO PILHA.

   Empilhado, o trilho comia ~450px dos 844px do aparelho ANTES do nome da
   casa aparecer: quem abre o app no meio do serviço rolava um dedo e meio
   pra chegar no primeiro número. O menu é orientação — não pode custar meia
   tela toda vez que se abre a operação.

   Como fita horizontal ele custa uma linha. A linha de estado sai só aqui:
   ela é resumo bom de ter na margem de um monitor, e no aparelho é o que
   fazia cada item ter três linhas de altura. O estado continua escrito
   dentro de cada tela, que é onde ele é lido de verdade. */
@media (max-width: 720px){
  /* A BARRA EMBAIXO (auditoria de 15/09, "Google como aplicação"). No celular
     o menu deixa de ser fita no alto e vira barra fixa no pé da tela: quatro
     destinos de uma palavra, ícone em cima do nome, o aberto com a pílula de
     brasa atrás do ícone. Fica à mão do polegar em qualquer altura da
     rolagem — que é onde o dono está quando decide trocar de área. */
  .frentes{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0;
    max-width: none; margin: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .frentes__item{
    flex: 1 1 0; min-width: 0; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 4px 2px 2px; border: 0; border-left: 0; border-radius: 0; background: none;
  }
  .frentes__item:hover{ background: none; border-left: 0; }
  /* Na barra, "Como usar" alinha com os outros: o respiro que o separa das
     frentes na margem do computador aqui vira degrau torto. */
  .frentes__item--guia{ margin-top: 0; }
  .frentes__ico{
    display: block; width: 24px; height: 24px; padding: 3px 14px; box-sizing: content-box;
    border-radius: var(--r-pill);
    fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .frentes__item[aria-current="page"]{ background: none; border-color: transparent; }
  .frentes__item[aria-current="page"] .frentes__ico{ background: var(--accent-soft); stroke: var(--brand); stroke-width: 2.2; }
  html[data-tema="brasa"] .frentes__item[aria-current="page"] .frentes__ico{ background: #FFE3D6; }
  html[data-tema="match"] .frentes__item[aria-current="page"] .frentes__ico{ background: #F0DEDE; }
  .frentes__item[aria-current="page"] .frentes__label{ color: var(--ink); font-weight: 600; }
  .frentes__label{ white-space: nowrap; font-size: 0.72rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
  .frentes__state{ display: none; }
  /* "Em breve" na barra: sem borda, só a palavra miúda embaixo do nome. */
  html[data-piloto="cardapio"] .frentes__item[aria-disabled="true"] .frentes__soon{
    align-self: center; padding: 0; border: 0; font-size: 0.52rem; letter-spacing: 0.04em; line-height: 1;
  }
  html[data-piloto="cardapio"] .frentes__item[aria-disabled="true"]{ opacity: .55; }
  .em-breve-aviso{ bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* O conteúdo termina acima da barra, e o balão de falar com o time sobe
     junto — senão ele senta em cima de "Conversa". */
  .app-main{ padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  [data-agnts-widget]{ bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
}

.app-head{ max-width: 760px; margin-bottom: 32px; }
/* Estado "já analisou": o cabeçalho de convite some e sobra a linha de
   sessão. Quem volta não precisa ser convidado a fazer o que já fez — ele
   precisa do relatório dele começando no topo. */
.app-head[data-mode="analisado"]{ margin-bottom: 20px; }
.app-head[data-mode="analisado"] .eyebrow,
.app-head[data-mode="analisado"] .basepeek,
.app-head[data-mode="analisado"] .app-title,
.app-head[data-mode="analisado"] .app-lede,
.app-head[data-mode="analisado"] .app-examples{ display: none; }
/* A entrada recolhida sai do fluxo, mas não do documento: os campos seguem
   lá com os mesmos valores, então "Nova análise" é só reabrir — nada é
   recriado nem perdido no caminho. */
.intake[hidden]{ display: none !important; }
.app-title{
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.04;
  margin: 12px 0;
}
.app-lede{ color: var(--muted); font-size: var(--fs-lg); max-width: 60ch; }

/* ---------- Convite ao exemplo (estado em repouso) ---------- */
/* Uma linha. Os cardápios de demonstração e o explicativo do que a análise
   entrega moram em /app/exemplos.html — a página de trabalho não é vitrine. */
.app-examples[hidden]{ display: none !important; }
.app-examples{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 0;
  color: var(--muted); font-size: var(--fs-md);
}
.app-examples__link{
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600;
  text-decoration: none;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.app-examples__link:hover{ border-color: var(--primary); background: var(--primary-04); }
.app-examples__link:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- A base: o todo, na primeira linha da tela ---------- */
/* Ocupa o lugar da antiga eyebrow decorativa. Continua sendo uma linha de
   sobrancelha — mesmo peso tipográfico, mesma discrição — mas agora é clicável
   e carrega números. O sublinhado pontilhado é a única promessa visual de que
   tem coisa atrás; botão de verdade aqui competiria com o "Analisar". */
.basepeek{ margin: 0; }
.basepeek__trigger{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 0; border: 0; background: transparent; text-align: left;
  cursor: pointer;
}
.basepeek__eyebrow{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--primary-60); font-weight: 600;
}
.basepeek__line{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px dotted var(--border-strong);
}
.basepeek__more{
  font-size: var(--fs-xs); color: var(--primary); text-decoration: underline;
  text-underline-offset: 2px; opacity: 0; transition: opacity .18s var(--ease);
}
.basepeek__trigger:hover .basepeek__more,
.basepeek__trigger:focus-visible .basepeek__more{ opacity: 1; }
.basepeek__trigger:hover .basepeek__line{ color: var(--ink); border-bottom-color: var(--primary); }
.basepeek__trigger:focus-visible{ outline: 2px solid var(--primary); outline-offset: 4px; }
@media (max-width: 640px){
  /* No celular o "ver o que tem dentro" não tem hover pra revelar — fica
     sempre visível, senão a porta não existe pra quem só toca. */
  .basepeek__more{ opacity: 1; }
  /* Sobrancelha de três linhas não é sobrancelha: sobra o par que responde a
     pergunta ("quantas casas, em quantos bairros"), e o resto está a um toque
     de distância, no inventário. */
  .basepeek__opt{ display: none; }
  .basepeek__line{ display: inline-block; }
}

/* ---------- Bloco de prova (estado em repouso) ---------- */
/* hidden tem que vencer o display:flex base — o app não tem reset global */
.proof[hidden]{ display: none !important; }
.proof{
  display: flex; flex-direction: column; gap: 16px;
  margin-top: 24px;
}
.proof__cards{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.proof__card{
  display: flex; flex-direction: column; gap: 6px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.proof__card-title{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink); font-weight: 600;
}
.proof__card-text{ color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.proof__cta{
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.03em;
  text-transform: uppercase; font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 11px 18px;
  cursor: pointer;
  transition: background .2s var(--ease), transform .15s var(--ease);
}
.proof__cta:hover{ background: var(--accent); color: #fff; transform: translateY(-1px); }
.proof__cta-arrow{ transition: transform .2s var(--ease); }
.proof__cta:hover .proof__cta-arrow{ transform: translateX(3px); }

/* ---------- Carimbo de demonstração (resultado de exemplo) ---------- */
.demo-flag[hidden]{ display: none !important; }
.demo-flag{
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 16px; padding: 12px 18px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--r-md);
}
.demo-flag__tag{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; background: var(--accent);
  padding: 3px 8px; border-radius: var(--r-sm); flex: none; margin-top: 1px;
}
.demo-flag__text{ font-size: var(--fs-md); color: var(--ink); line-height: 1.5; }

@media (max-width: 680px){
  .proof__cards{ grid-template-columns: 1fr; }
  .proof__cta{ align-self: stretch; justify-content: center; }
}

/* ---------- Intake ---------- */
.intake{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 8px 24px;
}

/* ---------- Intake refine (A15) ----------
   Bloco colapsável que reúne os 4 ajustes opcionais (tipo, bairro/cozinha,
   posicionamento, coberturas). Nasce fechado; o dono que não abre segue com
   defaults. O summary lista o que está dentro pra promessa não ser cega.
   Um badge acende quando alguma escolha diverge do default — sinal de que
   o refino está "em uso" mesmo colapsado. */
.intake-refine{
  margin: 16px 16px 8px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}
.intake-refine__summary{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  border-radius: var(--r-md);
  transition: background .18s var(--ease);
}
.intake-refine__summary::-webkit-details-marker{ display: none; }
.intake-refine__summary:hover{ background: var(--primary-04); }
.intake-refine__summary:focus-visible{
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.intake-refine__summary-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  letter-spacing: -0.005em;
  flex: none;
}
.intake-refine__summary-hint{
  color: var(--muted);
  font-size: var(--fs-sm);
  flex: 1 1 auto;
}
.intake-refine__summary-badge{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 100px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.intake-refine__summary-badge[hidden]{ display: none; }
.intake-refine__summary-badge-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.intake-refine__summary-ico{
  color: var(--muted);
  flex: none;
  transition: transform .18s var(--ease);
}
.intake-refine[open] .intake-refine__summary-ico{ transform: rotate(180deg); }
.intake-refine__body{
  padding: 4px 4px 12px;
  border-top: 1px solid var(--border);
}
/* Blocos internos já têm padding próprio; o body do details fecha o container. */
@media (max-width: 560px){
  .intake-refine{ margin: 12px 8px 4px; }
  .intake-refine__summary{ padding: 14px 14px; min-height: 44px; }
  .intake-refine__summary-hint{ display: none; } /* prioridade pro título+badge no mobile */
}
.intake__tabs{
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.intake-tab{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  min-height: 36px;
  color: var(--muted);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.intake-tab:hover{ background: var(--primary-04); color: var(--ink); }
.intake-tab.is-active{ background: var(--primary); color: #fff; }
.intake-tab--ghost{ margin-left: auto; }

.intake-panel{ padding: 0 16px; }
.intake-textarea{
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  resize: vertical;
  transition: border-color .2s var(--ease);
}
.intake-textarea:focus{ border-color: var(--accent); outline: none; }

/* dropzone */
.dropzone{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  text-align: center;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: #fff;
  padding: 48px 24px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.dropzone[hidden]{ display: none; }
.dropzone:hover, .dropzone.is-drag{ border-color: var(--accent); background: var(--accent-soft); }
.dropzone__icon{ color: var(--primary-60); }
.dropzone__text{ color: var(--ink); font-size: var(--fs-md); }
.dropzone__hint{ display:block; color: var(--muted); font-size: var(--fs-sm); margin-top: 6px; }
.dropzone__preview{ position: relative; }

/* Páginas escolhidas — grade de miniaturas numeradas. Numerar importa: a ordem
   da grade é a ordem em que as páginas são lidas, e o dono precisa enxergar
   isso antes de mandar analisar. */
.pages{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 12px;
}
.page{
  position: relative;
  border: 1px solid var(--border); border-radius: var(--r-md); background: #fff;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.page__thumb{
  width: 100%; height: 128px; object-fit: cover; display: block; background: var(--accent-soft);
}
/* PDF não vira miniatura: mostra o ícone do formato no mesmo espaço. */
.page__doc{
  height: 128px; display: flex; align-items: center; justify-content: center;
  color: var(--primary-60); background: var(--accent-soft);
}
.page__doc-ext{
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: 0.06em; color: var(--accent); margin-left: 6px;
}
.page__meta{ display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.page__name{
  color: var(--ink); font-size: var(--fs-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page__size{ color: var(--muted); font-size: var(--fs-xs); font-family: var(--font-mono); }
.page__num{
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 700;
  background: var(--primary); color: #fff; border-radius: var(--r-sm);
  padding: 3px 7px;
}
.page__drop{
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.94); color: var(--ink);
  border: 1px solid var(--border); font-size: var(--fs-md); line-height: 1;
  cursor: pointer;
}
.page__drop:hover{ background: #fff; border-color: var(--accent); color: var(--accent); }

.dropzone__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.dropzone__add, .dropzone__clear{
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--r-sm); cursor: pointer;
}
.dropzone__add{ background: var(--primary); color: #fff; }
.dropzone__clear{ background: transparent; color: var(--muted); border: 1px solid var(--border); }
.dropzone__clear:hover{ color: var(--ink); border-color: var(--border-strong); }
.dropzone__count{ color: var(--muted); font-size: var(--fs-sm); margin-left: auto; }

/* A aba "Usar um exemplo" saiu do bloco de entrada: os cardápios de
   demonstração moram em /app/exemplos.html, com estilo próprio. */

/* ---------- Aba CSV ---------- */
.intake-csv__desc{
  color: var(--muted); font-size: var(--fs-md); margin: 0 0 16px;
  line-height: 1.55;
}
.intake-csv__desc code{
  font-family: var(--font-mono); font-size: var(--fs-sm);
  background: var(--primary-04); padding: 1px 5px; border-radius: 3px;
}
.dropzone--csv{ margin-bottom: 12px; padding: 28px 24px; }

/* Seletor de abas — Excel/ODS com múltiplas planilhas */
.csv-sheets{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--primary-04);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.csv-sheets[hidden]{ display: none; }
.csv-sheets__label{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--primary);
}
.csv-sheets__chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.csv-sheet-chip{
  font: inherit; font-size: var(--fs-sm);
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: #fff; color: var(--ink);
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.csv-sheet-chip:hover{ border-color: var(--accent); }
.csv-sheet-chip.is-active{
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.csv-sheet-chip[disabled]{
  opacity: 0.5; cursor: not-allowed; text-decoration: line-through;
}
.csv-sheet-chip__count{
  margin-left: 6px; font-size: var(--fs-xs); opacity: 0.75;
  font-family: var(--font-mono);
}
.csv-sheet-chip--all{
  font-weight: 600;
  border-color: var(--accent, var(--gold-mid));
}
.csv-sheet-chip--all::before{
  content: "★ "; color: var(--accent, var(--gold-mid)); font-size: 0.9em;
}
.csv-sheet-chip--all.is-active{
  background: var(--accent, var(--gold-mid)); color: #fff; border-color: var(--accent, var(--gold-mid));
}
.csv-sheet-chip--all.is-active::before{ color: #fff; }

.csv-textarea{
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  resize: vertical;
  transition: border-color .2s var(--ease);
  margin-bottom: 12px;
}
.csv-textarea:focus{ border-color: var(--accent); outline: none; }

.csv-preview{
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 4px;
  margin-bottom: 4px;
}
.csv-preview__head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--primary-04);
  border-bottom: 1px solid var(--border);
}
.csv-preview__title{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--primary);
}
.csv-preview__clear{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 3px 10px; background: #fff;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.csv-preview__clear:hover{ border-color: var(--primary); color: var(--primary); }

.csv-preview__table{ max-height: 220px; overflow-y: auto; }
.csvp-row{
  display: grid; grid-template-columns: 1fr auto;
  gap: 12px; padding: 8px 16px;
  font-size: var(--fs-md); border-bottom: 1px solid var(--border);
}
.csvp-row:last-child{ border-bottom: none; }
.csvp-row--head{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  background: var(--surface);
}
.csvp-row--more{
  grid-template-columns: 1fr;
  text-align: center; color: var(--muted); font-style: italic;
  font-size: var(--fs-sm); padding: 10px 16px;
}
.csvp-row > span:last-child{
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-md); text-align: right; white-space: nowrap;
  color: var(--ink);
}

.csv-error{
  font-size: var(--fs-sm); color: var(--gold-deep);
  background: #FDF6E3; border: 1px solid var(--gold-soft);
  border-radius: var(--r-md); padding: 10px 14px;
  margin-top: 8px; line-height: 1.55;
}
.csv-error[hidden]{ display: none; }

/* Recorte por bairro/cozinha (opcional). Cozinha é <select> das cuisines
   conhecidas — antes era input livre com datalist, que aceitava qualquer
   texto e o servidor descartava em silêncio. */
.recorte{
  padding: 16px 16px 0;
}
.recorte__hint{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.recorte__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.recorte__field{
  display: flex; flex-direction: column; gap: 4px;
  cursor: default;
}
.recorte__label{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
}
.recorte__optional{ color: var(--muted); font-weight: 400; }
.recorte__input{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 12px;
  font-family: var(--font-mono); font-size: var(--fs-md); color: var(--ink);
  transition: border-color .2s var(--ease);
  width: 100%;
}
.recorte__input::placeholder{ color: var(--muted); }
.recorte__input:focus{
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-04);
}
.recorte__input--select{
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A2B3C' stroke-width='1.5'><path d='M4 6l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  padding-right: 32px;
  cursor: pointer;
}
/* Quanto vale, em casas, a escolha feita acima. Fica colada nos campos, em
   tipografia de monoespaço pra ler como leitura de instrumento e não como
   mais um texto de ajuda — é resposta a uma ação, não instrução. */
.recorte__base[hidden]{ display: none !important; }
.recorte__base{
  margin: 10px 0 0;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.03em;
  color: var(--muted); line-height: 1.5;
}

/* Sugestão automática de praça pelo bairro digitado.
   O [hidden] precisa ser explícito: `display: flex` abaixo vence o
   display:none default do atributo. Enquanto o bloco vivia dentro do
   <details> fechado isso não aparecia; promovido pro topo, o banner vazio
   ficava visível no repouso com o botão "comparar com essa praça" solto. */
.recorte__plaza-hint[hidden]{ display: none !important; }
.recorte__plaza-hint{
  margin-top: 12px; padding: 10px 12px;
  background: var(--primary-04); border: 1px solid var(--primary);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.recorte__plaza-hint-text{
  font-size: var(--fs-sm); color: var(--ink); line-height: 1.35;
  flex: 1 1 220px;
}
.recorte__plaza-hint-btn{
  appearance: none; background: var(--primary); color: #fff;
  border: 0; border-radius: var(--r-sm);
  padding: 7px 12px; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500;
}
.recorte__plaza-hint-btn:hover{ filter: brightness(0.95); }

/* Campo de coberturas/semana */
.intake__covers{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 0 16px; margin-top: 16px;
}
.covers__label{
  display: flex; flex-direction: column; gap: 2px;
  cursor: default;
}
.covers__title{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
}
.covers__hint{
  font-size: var(--fs-sm); color: var(--muted);
}
.covers__input{
  width: 120px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 12px;
  font-family: var(--font-mono); font-size: var(--fs-md); color: var(--ink);
  transition: border-color .2s var(--ease);
  -moz-appearance: textfield;
}
.covers__input::-webkit-inner-spin-button,
.covers__input::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
.covers__input::placeholder{ color: var(--muted); }
.covers__input:focus{
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-04);
}

.intake__actions{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 24px 16px 0; margin-top: 4px;
}
.intake__note{ color: var(--muted); font-size: var(--fs-sm); }
.intake__note--csv{ color: var(--muted); font-size: var(--fs-sm); display: block; width: 100%; margin-top: 4px; }
.intake__note--csv[hidden], .intake__note[hidden]{ display: none; }

/* ---------- Processing ---------- */
.proc{ margin-top: 32px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px 28px; }
.proc__steps{ display: flex; flex-direction: column; gap: 14px; }
.proc__step{ display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: var(--fs-md); transition: color .3s var(--ease); }
.proc__step.is-active{ color: var(--ink); font-weight: 500; }
.proc__step.is-done{ color: var(--positive); }
/* O relógio da leitura (16/09): o número que separa "lendo há 2 min" de "travou". */
.proc__relogio{ margin: 16px 0 0; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.proc__relogio span{ color: var(--ink); font-weight: 600; }
.proc__aviso{ margin: 6px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.proc__dot{
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); background: transparent; flex: none;
  transition: all .3s var(--ease);
}
.proc__step.is-active .proc__dot{ border-color: var(--accent); background: var(--accent); animation: pulse 1.1s var(--ease) infinite; }
.proc__step.is-done .proc__dot{ border-color: var(--positive); background: var(--positive); }
@keyframes pulse{ 0%,100%{ box-shadow: 0 0 0 0 var(--accent-soft); } 50%{ box-shadow: 0 0 0 6px transparent; } }

/* ---------- Error ---------- */
.errbox{ margin-top: 32px; border: 1px solid var(--danger); border-radius: var(--r-md); background: var(--danger-bg); padding: 20px 24px; }
.errbox__title{ font-weight: 600; color: var(--danger); margin-bottom: 6px; }
.errbox__msg{ color: var(--ink); font-size: var(--fs-md); margin-bottom: 10px; }
.errbox__hint{ color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; margin-bottom: 14px; }
.errbox__hint[hidden]{ display: none; }

/* ---------- Result ---------- */
.result{ margin-top: 40px; }
.result__gap{
  margin: 0 0 20px;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-md);
}
.result__gap b{ font-variant-numeric: tabular-nums; }

.report__foot{
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.6;
}
.report__foot-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60); white-space: nowrap;
}
.report__foot b{ color: var(--ink); }
.report__foot-divider{ display: none; }
.report__foot .provenance[hidden]{ display: none; }

/* ---------- Selo de procedência ---------- */
/* Card discreto (não banner): moldura + fundo --primary-08 dão peso de "atestado"
   sem disputar atenção com o relatório. Fundo no mesmo tom já usado no range chart. */
.provenance{
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 16px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--primary-08);
}
.provenance__label{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60);
}
.provenance__seal{ width: 13px; height: 13px; flex: 0 0 auto; }
/* A linha do dado (n · fonte · data) é o herói do selo — mais forte que label/método. */
.provenance__line{
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 500;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.provenance__method{ font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
/* Envelhecimento da base (>180d): tipografia muda de tom — accent dourado na
   linha do dado (já é a cor de "olhe com atenção" no produto) e o método sai
   do itálico para parecer recomendação, não nota de rodapé. Sem badge, sem
   borda colorida, sem ícone — o selo continua sendo tipografia editorial. */
.provenance.is-stale .provenance__line{ color: var(--accent); }
.provenance.is-stale .provenance__method{ color: var(--ink); font-style: normal; }

/* Linha sem match (item único / não comparável) */
.row--unmatched .cell--reco{ color: var(--muted); font-style: italic; }
.row--unmatched .delta{ visibility: hidden; }
/* ...menos quando a linha ganhou banda de prateleira: aí a coluna do delta
   carrega onde o preço do dono cai na estante (piso / metade / teto), que é a
   única leitura de posição que um prato sem par comparável admite. */
.row--unmatched .delta--shelf{ visibility: visible; }

/* ===================================================================
   Range chart — posição do preço na faixa do mercado
   =================================================================== */
.rangechart{
  margin: 4px 0 8px;
  padding: 24px 28px 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.rangechart__head{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 24px;
}
.rangechart__title{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--ink); margin: 0; letter-spacing: -0.01em;
}
.rangechart__legend{
  display: flex; flex-wrap: wrap; gap: 14px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.rc-key{ display: inline-flex; align-items: center; gap: 6px; }
.rc-key::before{ content: ""; width: 14px; height: 8px; border-radius: 2px; }
.rc-key--band::before{ background: var(--primary-08); }
.rc-key--iqr::before{ background: var(--primary-15); }
.rc-key--median::before{ width: 2px; height: 12px; border-radius: 0; background: var(--primary); }
.rc-key--you::before{ width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

.rangechart__rows{ display: flex; flex-direction: column; gap: 22px; }
.rc-row{ display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 20px; align-items: center; }
.rc-row__label{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rc-row__name{
  font-size: var(--fs-md); color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-row__delta{
  font-family: var(--font-mono); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  align-self: flex-start; padding: 1px 7px; border-radius: 999px;
}
.rc-row__delta[data-tone="danger"]{ background: var(--danger-bg); color: var(--danger); }
.rc-row__delta[data-tone="positive"]{ background: var(--positive-bg); color: var(--positive); }
.rc-row__delta[data-tone="neutral"]{ background: var(--primary-08); color: var(--primary); }
/* Sem mercado atrás, sem percentual — mesma regra que já apaga IQR e mediana
   desta régua em amostra rasa. Ver deltaCellHtml em app.js. */
.rc-row__delta--mudo{ background: transparent; color: var(--muted); }

.rc-track{
  position: relative; height: 12px; border-radius: 6px;
  background: transparent; margin: 16px 8px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.rc-track.is-in{ opacity: 1; transform: none; }
.rc-band{
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 6px; background: var(--primary-08); border-radius: 3px;
}
.rc-iqr{
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 6px; background: var(--primary-15); border-radius: 3px;
}
.rc-median{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 2px; height: 16px; background: var(--primary); border-radius: 1px;
}
.rc-you{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.rc-you__dot{
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--paper);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.rc-you__price{
  position: absolute; bottom: 16px;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rc-you[data-tone="danger"] .rc-you__dot{ background: var(--danger); }
.rc-you[data-tone="positive"] .rc-you__dot{ background: var(--positive); }

/* ===================================================================
   CORTE DA CONCORRÊNCIA — o seletor que governa a paisagem de faixa e o
   mapa. Fica ACIMA das duas seções e fora delas de propósito: é o que
   decide quem entra nas duas, e morar dentro de uma sugeriria que só
   aquela obedece. Três opções em linha, cada uma com a contagem embaixo
   do nome; a que não fecha conta fica apagada e não clica, com o motivo
   no lugar da contagem. No impresso o seletor some e sobra a frase do
   corte ativo — papel não tem clique, e um botão aceso impresso mente.
   =================================================================== */
.peercut{
  margin: 4px 0 0;
  padding: 18px 28px 20px;
  border-top: 1px solid var(--border);
}
.peercut[hidden]{ display: none !important; }
.peercut__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.peercut__options{ display: flex; flex-wrap: wrap; gap: 8px; }
.peercut__opt{
  flex: 1 1 190px;
  display: flex; flex-direction: column; gap: 2px;
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.peercut__opt:hover:not(.is-off){ background: var(--primary-04); border-color: var(--primary-15); }
.peercut__opt:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.peercut__opt.is-on{ background: var(--primary-04); border-color: var(--primary); }
/* Opção sem amostra: continua legível (o motivo é a informação), só perde o
   convite ao clique. Nada de esconder — sumir a opção deixaria a pergunta do
   dono sem resposta em vez de respondida com "ainda não". */
.peercut__opt.is-off{ cursor: not-allowed; opacity: 0.62; }
.peercut__label{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-md); color: var(--ink);
}
.peercut__opt.is-on .peercut__label{ color: var(--primary); }
.peercut__hint{ font-size: var(--fs-xs); color: var(--muted); }
.peercut__n{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em;
  color: var(--accent); margin-top: 2px;
}
.peercut__n--off{ color: var(--muted); text-transform: none; letter-spacing: 0; }
.peercut__prose{
  margin: 12px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: 62ch;
}
.peercut__prose b{ color: var(--ink); font-weight: 600; }
.peercut__prose-cut{ color: var(--ink); font-weight: 600; }
@media (max-width: 640px){
  .peercut{ padding: 16px 18px 18px; }
  .peercut__options{ flex-direction: column; }
  .peercut__opt{ flex: 1 1 auto; }
}
@media print{
  /* No papel não se escolhe nada: somem os botões e o convite a escolher, e
     sobra a frase — que já começa nomeando o corte e a contagem, então o
     relatório impresso continua dizendo qual comparação está na página. */
  .peercut__options, .peercut__eyebrow{ display: none !important; }
  .peercut{ border-top: none; padding-bottom: 0; }
  .peercut__prose{ margin-top: 0; }
}

/* ===================================================================
   F1.2 — Benchmark de Faixa de Preço (barras horizontais).
   Paisagem do recorte por faixa derivada. Petróleo (--primary) nas barras
   neutras; dourado (--accent) só na barra VOCÊ — mesmo idioma do rangechart
   (you = accent). Faixa vazia fica tracejada para sinalizar "0 casas aqui"
   sem desaparecer da régua.
   =================================================================== */
/* ------------------------------------------------------------------ */
/* O TICKET DE OPERAÇÃO — o que o cliente paga ao sair da mesa.        */
/* Mesmo idioma visual da paisagem de preço (eyebrow mono, título      */
/* Fraunces, moldura de seção): é a mesma pergunta lida por outra      */
/* unidade, e duas gramáticas fariam parecer dois produtos.            */
/* ------------------------------------------------------------------ */
.ticketop{
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--paper); padding: 26px 28px 28px; margin: 0 0 28px;
  break-inside: avoid;
}
.ticketop[hidden]{ display: none !important; }
.ticketop__head{ margin-bottom: 20px; }
.ticketop__eyebrow{
  display: block; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 6px;
}
.ticketop__title{
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500;
  color: var(--ink); margin: 0 0 8px;
}
.ticketop__lede{ font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); margin: 0; }
.ticketop__lede b{ color: var(--ink); font-weight: 600; }

.ticketop__kpis{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-bottom: 22px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.ticketop__kpi{ padding: 14px 16px; border-left: 1px solid var(--border); }
.ticketop__kpi:first-child{ border-left: none; padding-left: 0; }
.ticketop__kpi-val{
  display: block; font-family: var(--font-display); font-size: var(--fs-2xl);
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ticketop__kpi-lab{
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.ticketop__kpi-sub{ display: block; margin-top: 5px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }

/* A escada: uma linha por casa, do mais barato ao mais caro, com a linha do
   dono no meio delas. É o desenho do estudo — o dono lê onde ele entra. */
.ticketop__escada{ display: flex; flex-direction: column; }
.top-row{
  display: grid; grid-template-columns: 62px 1fr auto;
  gap: 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.top-row:last-child{ border-bottom: none; }
.top-row__delta{
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--muted);
}
.top-row--acima .top-row__delta{ color: var(--danger); }
.top-row--abaixo .top-row__delta{ color: var(--positive); }
.top-row__nome{ font-size: var(--fs-md); color: var(--ink); min-width: 0; }
.top-row__onde{ color: var(--muted); font-size: var(--fs-sm); }
.top-row__ticket{
  font-family: var(--font-mono); font-size: var(--fs-md); color: var(--ink);
  font-variant-numeric: tabular-nums; flex: none;
}
/* A linha do dono é a régua: fundo dourado, sem delta (ele é o zero). */
.top-row--voce{
  background: rgba(201, 169, 97, 0.12);
  margin: 4px -12px; padding: 11px 12px; border-radius: var(--r-sm);
  border-bottom: none;
}
.top-row--voce .top-row__nome{ font-weight: 600; }
.top-row--voce .top-row__delta{
  font-size: var(--fs-2xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}

.ticketop__readout{ margin: 18px 0 0; font-size: var(--fs-md); line-height: 1.5; color: var(--ink); }
.ticketop__readout b{ font-weight: 600; }
.ticketop__footer{ margin-top: 14px; }
.ticketop__nota{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  line-height: 1.55; margin: 8px 0 0;
}
.ticketop__nota b{ color: var(--ink); }

@media (max-width: 560px){
  .ticketop{ padding: 20px 16px 22px; }
  /* Três colunas de número num telefone viram três colunas de um dígito. */
  .ticketop__kpis{ grid-template-columns: 1fr; }
  .ticketop__kpi{ border-left: none; border-top: 1px solid var(--border); padding-left: 0; }
  .ticketop__kpi:first-child{ border-top: none; }
  .top-row{ grid-template-columns: 56px 1fr; row-gap: 2px; }
  .top-row__ticket{ grid-column: 2; }
}

.tierbars{
  margin: 4px 0 8px;
  padding: 24px 28px 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---------- Seções colapsáveis (nível 3 de detalhe) ----------
   As seções técnicas do relatório (tierbars, compmap, rangechart, pricestair,
   pricediag, pendencies) nascem com `is-collapsible is-collapsed` e o JS
   injeta um botão-chevron dentro do header. Colapsado mostra só o header +
   uma linha de "prévia" que o header já traz (eyebrow + título). Padding
   vertical fica menor no estado fechado. O botão é acessível: role padrão de
   button, aria-expanded reflete estado, aria-controls aponta pra section.id.
   Impressão sai TUDO expandido — a colapsagem é só ergonomia de tela. */
.is-collapsible{ position: relative; }
/* O chevron é absoluto no canto (top 22 / right 24, 32px de lado). Sem reservar
   a faixa, o conteúdo do header corre por baixo dele: no desktop a legenda do
   rangechart saía com o ícone em cima de "SEU PREÇO", e no celular o eyebrow
   longo ("PAISAGEM DE PREÇO · CONCORRENTES DO RECORTE") esbarrava no botão.
   Regra no header e não seção a seção porque vale pra toda colapsável — a
   próxima nasce certa sem ninguém lembrar disto. */
.is-collapsible > header{ padding-right: 44px; }
@media print{ .is-collapsible > header{ padding-right: 0; } }
.collapsible-toggle{
  position: absolute; top: 22px; right: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.collapsible-toggle:hover{
  background: var(--primary-04); color: var(--primary); border-color: var(--primary-15);
}
.collapsible-toggle:focus-visible{
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.collapsible-toggle__ico{
  transition: transform .18s var(--ease);
}
.is-collapsible.is-collapsed .collapsible-toggle__ico{ transform: rotate(-90deg); }
/* Colapsa TUDO exceto o primeiro <header> filho — o header já traz eyebrow,
   título e lede resumindo a seção. */
.is-collapsible.is-collapsed > *:not(header):not(.collapsible-toggle){
  display: none !important;
}
.is-collapsible.is-collapsed{ padding-bottom: 16px; }
/* No PDF, expande todas as seções colapsáveis — impressão precisa do detalhe. */
@media print{
  .is-collapsible.is-collapsed > *:not(header):not(.collapsible-toggle){
    display: revert !important;
  }
  .is-collapsible.is-collapsed{ padding-bottom: 28px; }
  .collapsible-toggle{ display: none; }
}
.tierbars[hidden]{ display: none !important; }
.tierbars__head{ margin-bottom: 20px; }
.tierbars__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.tierbars__title{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em;
}
.tierbars__lede{
  margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: 62ch;
}

/* A faixa de "a base ainda não é da sua cidade". Mesmo peso visual do aviso de
   arquivo: precisa ser lida ANTES do primeiro número, não depois. */
.fora-da-base{
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 14px 16px; margin: 0 0 20px;
  font-size: var(--fs-md); line-height: 1.55; color: var(--ink);
}
.fora-da-base[hidden]{ display: none !important; }
.fora-da-base b{ font-weight: 600; }
.fora-da-base__tag{
  display: block; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}

.tierbars__chart{ display: flex; flex-direction: column; gap: 14px; }

.tb-row{
  display: grid;
  grid-template-columns: minmax(110px, 160px) 1fr;
  gap: 18px;
  align-items: center;
}
.tb-row__label{
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.tb-row__tier{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); font-weight: 600;
}
.tb-row__range{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tb-row__track{
  position: relative; height: 22px;
  background: var(--primary-04);
  border-radius: 4px;
  display: flex; align-items: center;
}
.tb-row__fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--primary);
  border-radius: 4px;
  opacity: 0; transform-origin: left center; transform: scaleX(0.92);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.tb-row__fill.is-in{ opacity: 0.88; transform: scaleX(1); }
.tb-row__value{
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
  padding: 0 10px;
}
.tb-row__pct{ color: var(--muted); font-weight: 500; }
.tb-row__you-meta{
  position: relative; z-index: 1; margin-left: auto; padding: 0 10px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Barra VOCÊ: dourado preenchido sólido, sem opacidade, contraste duro
   contra as petróleo translúcidas. O texto do valor fica em branco
   pra ter contraste sobre o dourado cheio. */
.tb-row--you .tb-row__fill{
  background: var(--accent);
}
.tb-row--you .tb-row__fill.is-in{ opacity: 1; }
.tb-row--you .tb-row__value{
  color: var(--ink);
}
.tb-row--you .tb-row__pct{ color: var(--ink); opacity: 0.7; }
.tb-row--you .tb-row__track{
  background: rgba(201, 169, 97, 0.10); /* hint suave da banda dourada */
}
/* Faixa vazia: fill apaga (width 0), borda tracejada na trilha pra dizer
   "essa faixa existe na régua, mas ninguém caiu nela" sem sumir do gráfico. */
.tb-row--empty .tb-row__track{
  background: transparent;
  border: 1px dashed var(--border-strong, var(--border));
}
.tb-row--empty .tb-row__value{
  color: var(--muted); font-weight: 500;
}

/* QUEM ESTÁ EM CADA FAIXA — a lista que abre ao clicar na barra. */
.tb-row--clicavel{ cursor: pointer; }
.tb-row--clicavel .tb-row__track{ transition: box-shadow .15s var(--ease); }
.tb-row--clicavel:hover .tb-row__track,
.tb-row--clicavel:focus-visible .tb-row__track{
  box-shadow: 0 0 0 2px var(--border-strong);
}
.tb-row--clicavel:focus-visible{ outline: none; }
.tb-row--aberta .tb-row__track{ box-shadow: 0 0 0 2px var(--primary); }
.tb-row__abrir{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}

.tb-quem{ margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.tb-quem[hidden]{ display: none !important; }
.tb-quem__titulo{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
}
.tb-quem__lista{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tb-quem__casa{
  display: flex; align-items: baseline; gap: 10px; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.tb-quem__casa:last-child{ border-bottom: none; }
.tb-quem__nome{ font-size: var(--fs-md); color: var(--ink); min-width: 0; }
.tb-quem__onde{ color: var(--muted); font-size: var(--fs-sm); }
.tb-quem__mediana{
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink);
  font-variant-numeric: tabular-nums; flex: none;
}
.tb-quem__nota{
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; margin: 10px 0 0;
}
.tb-quem__vazia{ font-size: var(--fs-sm); color: var(--muted); margin: 0; }

.tierbars__readout{
  margin: 18px 0 0;
  font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
}
.tierbars__readout b{ color: var(--ink); font-weight: 600; }
.tierbars__warning{
  margin: 10px 0 0;
  padding: 8px 12px;
  background: var(--accent-soft, rgba(201,169,97,0.08));
  border-left: 3px solid var(--accent);
  color: var(--ink); font-size: var(--fs-sm); line-height: 1.45;
}
.tierbars__footer{ margin-top: 14px; }
.tierbars__footer .frontier-badge{ margin: 0 0 8px; }
.tierbars__rule-note{
  margin: 0;
  font-size: var(--fs-sm); line-height: 1.45; color: var(--muted);
}
.tierbars__rule-note b{ color: var(--ink); }

/* Mobile: a coluna de label fica menor, mas o layout em grid sobrevive bem
   até ~360px. Abaixo de 520px o range vira nowrap pra não quebrar feio. */
@media (max-width: 520px){
  .tierbars{ padding: 20px 16px 22px; }
  .tb-row{
    grid-template-columns: minmax(90px, 110px) 1fr;
    gap: 12px;
  }
  .tb-row__tier{ font-size: var(--fs-xs); }
  .tb-row__range{ font-size: var(--fs-2xs); white-space: nowrap; }
  .tb-row__track{ height: 24px; }
  .tb-row__value{ font-size: var(--fs-sm); padding: 0 8px; }
  .tb-row__you-meta{
    font-size: var(--fs-2xs); padding: 0 8px;
    /* Em telas estreitas o meta da barra VOCÊ pula pra LINHA DE BAIXO via
       absoluto pra não competir com a contagem; mantém legibilidade sem
       reflow inteiro do row. */
    position: absolute; left: 0; right: 0; bottom: -16px;
    text-align: right;
  }
  .tierbars__readout{ font-size: var(--fs-md); }
}

/* ===================================================================
   F1.3 — Mapa Competitivo (scatter geográfico honesto).
   Mesmo idioma visual do tierbars (eyebrow mono dourado, título Fraunces,
   lede curta). Pontos cor petróleo/dourado por mesma-cozinha-vs-outras,
   tamanho por rating com clamp. "Você" entra como ANEL tracejado dourado
   (não ponto cheio) — sinal visual de que é posição aproximada, não
   endereço real. Lista lateral "Mais próximos" trabalha junto do scatter;
   no mobile o scatter some e a lista assume sozinha. Print: break-inside
   avoid + max-height pra não vazar página.
   =================================================================== */
.compmap{
  margin: 4px 0 8px;
  padding: 24px 28px 28px;
  border-bottom: 1px solid var(--border);
}
.compmap[hidden]{ display: none !important; }
.compmap__head{ margin-bottom: 18px; }
.compmap__heading{ display: flex; flex-direction: column; gap: 2px; }
.compmap__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.compmap__title{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em;
}
.compmap__lede{
  margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: 64ch;
}
.compmap__lede b{ color: var(--ink); font-weight: 600; }

.compmap__rest[hidden], .compmap__live[hidden]{ display: none !important; }
.compmap__rest{
  padding: 18px 16px;
  border: 1px dashed var(--border-strong, var(--border));
  background: var(--primary-04);
  border-radius: 6px;
}
.compmap__rest-text{
  margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--muted);
}

.compmap__live{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
  grid-template-areas:
    "chart  nearby"
    "legend legend";
  gap: 22px 22px;
  align-items: start;
}
.compmap__chart  { grid-area: chart; }
.compmap__nearby { grid-area: nearby; }
.compmap__legend { grid-area: legend; }
.compmap__chart{
  position: relative;
  background: var(--primary-04);
  border-radius: 6px;
  padding: 10px;
  overflow: hidden;
}
.compmap__chart svg{ display: block; width: 100%; height: auto; }

/* Legenda: ao lado da lista nominal. Confessa cada canal visual. */
.compmap__legend{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  color: var(--muted); text-transform: uppercase;
}
.compmap__legend li{ display: inline-flex; align-items: center; gap: 7px; }
.compmap__legend .cml-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary); display: inline-block;
}
.compmap__legend .cml-dot--same{ background: var(--accent); }
.compmap__legend .cml-dot--other{ background: var(--primary); }
.compmap__legend .cml-dot--approx{
  background: transparent; border: 1.5px solid var(--primary);
}
.compmap__legend .cml-dot--you{
  width: 12px; height: 12px; border-radius: 50%;
  background: transparent; border: 2px dashed var(--accent);
}
.compmap__legend .cml-size{
  display: inline-flex; align-items: center; gap: 4px;
}
.compmap__legend .cml-size i{
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary); display: inline-block;
}
.compmap__legend .cml-size i.big{ width: 12px; height: 12px; }

.compmap__nearby{
  border-left: 3px solid var(--accent);
  padding: 0 0 0 14px;
}
.compmap__nearby-title{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin: 2px 0 8px;
}
.compmap__nearby-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.compmap__nearby-item{
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.compmap__nearby-item:last-child{ border-bottom: 0; }
.compmap__nearby-name{
  font-size: var(--fs-md); color: var(--ink); font-weight: 600;
  font-family: var(--font-display);
}
.compmap__nearby-meta{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.compmap__nearby-meta b{ color: var(--ink); font-weight: 600; }
.compmap__nearby-empty{
  font-size: var(--fs-sm); color: var(--muted); font-style: italic;
}
/* Aparece quando não há nenhuma casa na vizinhança do dono: assume o buraco de
   cobertura antes de listar o que existe, pra a lista não passar por vizinhança
   o que é a casa mais perto a 20 km. */
.compmap__nearby-lead{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin: 0 0 10px;
}

.compmap__footer{ margin-top: 16px; }
.compmap__footer .frontier-badge{ margin: 0; }

/* Marcador "Você" dentro do SVG — anel tracejado dourado, sem preenchimento.
   Sinal claro: NÃO é um peer, é uma estimativa. */
.cm-you-ring{
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
/* Endereço declarado: o anel fecha e ganha miolo. É a mesma gramática dos
   pontos das casas — tracejado/vazado é aproximação, cheio é endereço
   confirmado —, e é o que faz o mapa parar de carimbar "aproximado" em cima do
   endereço que o próprio dono digitou e confirmou. */
.cm-you-ring--exata{ stroke-dasharray: none; }
.cm-you-dot{ fill: var(--accent); stroke: none; }
.cm-you-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  fill: var(--accent); text-transform: uppercase; font-weight: 600;
}
.cm-peer{ stroke: rgba(0,0,0,0.18); stroke-width: 0.7; }
.cm-peer--same{ fill: var(--accent); }
.cm-peer--other{ fill: var(--primary); opacity: 0.82; }
/* Casa cujo cardápio foi coletado mas cujo endereço não: entra pelo centro do
   bairro. Vazada de propósito — o traço diz "é este bairro", não "é aqui". */
.cm-peer--approx{ fill: none; stroke-width: 1.5; }
.cm-peer--approx.cm-peer--other{ stroke: var(--primary); opacity: 0.7; }
.cm-peer--approx.cm-peer--same{ stroke: var(--accent); opacity: 0.95; }
.cm-axis-line{ stroke: rgba(0,0,0,0.18); stroke-width: 0.6; }
.cm-axis-text{
  font-family: var(--font-mono); font-size: var(--fs-2xs); fill: var(--muted);
  letter-spacing: 0.04em;
}
.cm-anchor-text{
  font-family: var(--font-mono); font-size: var(--fs-2xs); fill: var(--ink);
  letter-spacing: 0.04em; font-weight: 600;
}
.cm-scale-text{
  font-family: var(--font-mono); font-size: var(--fs-2xs); fill: var(--muted);
  letter-spacing: 0.04em;
}
.cm-scale-line{ stroke: var(--ink); stroke-width: 1.2; }

/* Mobile: o scatter geográfico fica pequeno demais para ser útil; some.
   A lista nominal "Mais próximos de você" assume sozinha — entrega a
   mesma informação numa forma mais legível em tela estreita. */
@media (max-width: 720px){
  .compmap__live{
    grid-template-columns: 1fr;
    grid-template-areas:
      "chart"
      "nearby"
      "legend";
    gap: 14px;
  }
}
@media (max-width: 560px){
  .compmap{ padding: 20px 16px 22px; }
  .compmap__chart{ display: none; }
  .compmap__nearby{ border-left: none; padding-left: 0; }
}

/* Print/PDF: a seção inteira segura como bloco; o SVG não vaza página.
   Reforço explícito do grid (alguns engines de PDF reinterpretam areas
   quando combinam media queries) — o scatter precisa ficar à esquerda
   da lista nominal mesmo em viewports estreitas durante o print. */
@media print{
  .compmap{ break-inside: avoid; page-break-inside: avoid; }
  .compmap__chart svg{ max-height: 130mm; }
  .compmap__live{
    grid-template-columns: minmax(0, 1.6fr) minmax(180px, 1fr);
    grid-template-areas:
      "chart  nearby"
      "legend legend";
  }
  .compmap__chart{ display: block; }   /* PDF imprime o scatter mesmo em viewport estreita */
  .compmap__nearby{ border-left: 3px solid var(--accent); padding-left: 14px; }
}

/* ===================================================================
   F2.2 — Mapa preço × giro (scatter observacional).
   Paleta da casa (cores das categorias vivem inline no SVG, fornecidas pela
   tabela PG_CATS em app.js — single source). Aqui só o esqueleto, tipografia,
   estados de repouso e print. Mobile: SVG some, lista plana aparece.
   =================================================================== */
.pricegiro{
  margin: 4px 0 8px;
  padding: 24px 28px 28px;
  border-bottom: 1px solid var(--border);
}
.pricegiro[hidden]{ display: none !important; }
.pricegiro__head{ margin-bottom: 18px; }
.pricegiro__heading{ display: flex; flex-direction: column; gap: 2px; }
.pricegiro__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.pricegiro__title{
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  color: var(--ink); margin: 0 0 8px;
}
.pricegiro__lede{
  color: var(--muted); font-size: var(--fs-md); line-height: 1.55; margin: 0;
  max-width: 68ch;
}

/* Repouso fantasma: SVG mini cinza + frase convite. */
.pricegiro__rest[hidden], .pricegiro__live[hidden]{ display: none !important; }
.pricegiro__rest{
  display: flex; align-items: center; gap: 22px;
  padding: 22px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--primary-04);
}
.pricegiro__ghost{
  flex: 0 0 auto;
  width: 200px; max-width: 36%;
  color: var(--muted);
}
.pricegiro__ghost svg{ width: 100%; height: auto; display: block; }
.pricegiro__rest-text{
  flex: 1 1 auto;
  margin: 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.55;
}

/* Vivo: SVG + legenda + lista mobile (controlados por media query). */
.pricegiro__live{ display: flex; flex-direction: column; gap: 14px; }
.pricegiro__chart{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.pg-svg{
  width: 100%; height: auto; display: block;
  font-family: var(--font-text);
}
.pg-plot{ fill: transparent; stroke: var(--border); stroke-width: 0.6; }
.pg-grid{ stroke: var(--border); stroke-width: 0.5; opacity: 0.6; }
.pg-tick{ font-size: var(--fs-2xs); fill: var(--muted); font-family: var(--font-mono); }
.pg-axis{ font-size: var(--fs-2xs); fill: var(--muted); letter-spacing: 0.02em; }
.pg-dot{
  stroke: var(--paper); stroke-width: 1.2;
  opacity: 0.92;
  transition: r 120ms var(--ease);
}
.pg-dot:hover{ r: 8; opacity: 1; }
/* Outlier de força de marca: anel sutil ao redor pra leitura imediata. */
.pg-dot--forca{ stroke: var(--ink); stroke-width: 1.6; }
/* Ponto que ficou no topo do eixo Y por causa do clamp p95 — estilo riscado. */
.pg-dot--clamped{ stroke-dasharray: 2 2; }
.pg-ann__guide{
  stroke: var(--ink); stroke-width: 0.7; stroke-dasharray: 2 2; opacity: 0.55;
}
.pg-ann__name{
  font-size: var(--fs-2xs); fill: var(--ink); font-weight: 600;
}
.pg-ann__tag{
  font-size: var(--fs-2xs); fill: var(--muted); font-family: var(--font-mono);
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* Legenda em linha única, sem caixa. "Cada ponto = 1 prato" primeiro. */
.pricegiro__legend{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 16px;
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-sm); color: var(--muted);
}
.pg-leg__intro{ color: var(--ink); font-weight: 600; }
.pg-leg__item{ display: inline-flex; align-items: center; gap: 6px; }
.pg-leg__sw{
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--paper);
}

/* Lista mobile: invisível no desktop (controlada por media query abaixo). */
.pricegiro__mlist{ display: none; flex-direction: column; gap: 6px; }
.pg-mlist__row{
  display: grid;
  grid-template-columns: 14px 1fr auto auto auto;
  align-items: center; gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--fs-sm);
}
.pg-mlist__sw{
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--border);
}
.pg-mlist__name{ color: var(--ink); font-weight: 500; }
.pg-mlist__badge{
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--ink); border: 1px solid var(--accent);
}
.pg-mlist__cat{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pg-mlist__price, .pg-mlist__vol{
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink);
}
.pg-mlist__vol{ color: var(--muted); }

.pricegiro__foot{
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.5;
  margin: 4px 0 0;
  font-family: var(--font-mono); letter-spacing: 0.02em;
}

/* Mobile: SVG e legenda somem; lista plana aparece. Decisão UX: lista linear
   ordenada por outlier-ness é a leitura útil em scroll de celular — categoria
   vira coluna pequena, não fragmenta. */
@media (max-width: 600px){
  .pricegiro{ padding: 18px 18px 22px; }
  .pricegiro__chart, .pricegiro__legend{ display: none; }
  .pricegiro__mlist{ display: flex; }
  .pricegiro__rest{ flex-direction: column; align-items: stretch; text-align: center; gap: 12px; padding: 16px; }
  .pricegiro__ghost{ width: 60%; max-width: 200px; margin: 0 auto; }
  .pg-mlist__row{
    grid-template-columns: 12px 1fr auto;
    grid-template-areas:
      "sw name name"
      "sw cat price"
      "sw cat vol";
    row-gap: 2px;
  }
  .pg-mlist__sw{ grid-area: sw; align-self: start; margin-top: 4px; }
  .pg-mlist__name{ grid-area: name; }
  .pg-mlist__cat{ grid-area: cat; }
  .pg-mlist__price{ grid-area: price; text-align: right; }
  .pg-mlist__vol{ grid-area: vol; text-align: right; }
}

/* ===================================================================
   Ponto de equilíbrio — a margem do cardápio contra o fixo já fechado.
   Mesma família visual das seções de relatório (cabeçalho + linhas), sem
   semáforo próprio: aqui a cor só separa folga de buraco no herói.
   =================================================================== */
.breakeven{
  margin: 4px 0 8px;
  padding: 24px 28px 28px;
  border-bottom: 1px solid var(--border);
}
.breakeven__head{ margin-bottom: 20px; }
.breakeven__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.breakeven__title{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em;
}
.breakeven__lede{
  margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: 62ch;
}
.breakeven__hero{
  padding: 16px 18px; border-radius: var(--r-sm);
  background: var(--primary-04); border: 1px solid var(--border);
  margin-bottom: 16px;
}
.breakeven__hero[data-tone="green"]{ border-color: var(--ok-30, var(--border)); }
.breakeven__hero[data-tone="red"]{ border-color: var(--bad-30, var(--border)); }
.bk-hero__label{
  display: block; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}
.bk-hero__value{
  font-family: var(--font-mono); font-size: var(--fs-2xl); color: var(--ink);
  line-height: 1.1; display: block;
}
.bk-hero__sub{
  display: block; margin-top: 8px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
}
.bk-hero__sub b{ color: var(--ink); font-weight: 600; }
.breakeven__rows{ display: flex; flex-direction: column; gap: 2px; }
.bk-row{
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dashed var(--border);
}
.bk-row:last-child{ border-bottom: none; }
.bk-row__name{
  font-size: var(--fs-md); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-row__share{ font-family: var(--font-mono); font-size: var(--fs-md); color: var(--ink); }
.bk-row__alone{ font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.bk-row--negative .bk-row__share{ color: var(--bad, var(--ink)); }
.breakeven__note{
  margin: 14px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
  padding: 10px 12px; background: var(--primary-04); border-radius: var(--r-sm);
}
.breakeven__note[hidden]{ display: none !important; }
.breakeven__note b{ color: var(--ink); font-weight: 600; }

/* ---- O que a casa paga todo mês ----
   Quatro linhas de declaração, coladas na margem que vai pagá-las. Ver
   renderBkFixo() no app.js.

   A marca de estimativa é uma etiqueta e não uma cor de alerta: linha vinda da
   referência não está errada nem pendente, está apenas menos exata do que
   poderia — e vermelho ali cobraria uma correção que a pessoa talvez não tenha
   como fazer hoje. */
.bkfixo{
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-sm);
}
.bkfixo[hidden]{ display: none !important; }
.bkfixo__lede{ margin: 0 0 12px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: 62ch; }
.bkfixo__linhas{ display: flex; flex-direction: column; gap: 2px; }
.bkfixo__linha{
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px dashed var(--border);
}
.bkfixo__linha:last-child{ border-bottom: none; }
.bkfixo__label{ font-size: var(--fs-sm); color: var(--ink); line-height: 1.4; }
.bkfixo__marca{
  margin-left: 8px; padding: 1px 6px; border-radius: var(--r-sm);
  background: var(--primary-08); color: var(--muted);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.bkfixo__campo{
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--paper); padding: 4px 8px;
}
.bkfixo__linha.is-estimado .bkfixo__campo{ border-style: dashed; }
.bkfixo__prefix{ font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.bkfixo__input{
  width: 92px; border: none; background: none; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); text-align: right;
}
.bkfixo__input:focus{ outline: none; }
.bkfixo__campo:focus-within{ border-color: var(--primary); border-style: solid; }
.bkfixo__ref{
  border: none; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-xs); color: var(--muted);
  text-decoration: underline; white-space: nowrap;
}
.bkfixo__ref:hover{ color: var(--ink); }
.bkfixo__total{ margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.bkfixo__total-val{ font-size: var(--fs-md); color: var(--muted); }
.bkfixo__total-val b{ font-family: var(--font-mono); color: var(--ink); font-weight: 600; }
.bkfixo__total-nota{ font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.bkfixo__total-nota b{ color: var(--ink); font-weight: 600; }
@media print{
  /* No PDF vale o total e a marca de estimativa; os campos de digitar são
     gesto de tela e não existem no papel. */
  .bkfixo__ref, .bkfixo__campo{ display: none; }
}

@media (max-width: 640px){
  .breakeven{ padding: 20px 16px 22px; }
  .bk-row{ grid-template-columns: minmax(0, 1fr) auto; }
  .bk-row__alone{ grid-column: 1 / -1; }
  /* No celular o rótulo ganha a linha inteira e o campo desce com o "não sei"
     ao lado: três colunas em 360px espremeriam o campo de dinheiro a um ponto
     em que ele deixa de parecer campo. */
  .bkfixo__linha{ grid-template-columns: minmax(0, 1fr) auto; }
  .bkfixo__label{ grid-column: 1 / -1; }
}

/* ===================================================================
   Escada de preços (F4) — preços do cardápio ordenados ENTRE SI.
   Cor neutra (--primary) pros degraus; dourado (--accent) só pra âncora/vão,
   pra não colidir com o verde/vermelho de "acima/abaixo do mercado" do rangechart.
   =================================================================== */
.pricestair{
  margin: 4px 0 8px;
  padding: 24px 28px 28px;
  border-bottom: 1px solid var(--border);
}
.pricestair__head{ margin-bottom: 22px; }
.pricestair__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.pricestair__title{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em;
}
.pricestair__lede{
  margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: 62ch;
}

.pricestair__rows{ display: flex; flex-direction: column; gap: 4px; }
.ps-row{ position: relative; padding: 7px 0; }
.ps-row__bar{
  position: relative; height: 8px; margin-bottom: 6px;
  opacity: 0; transform: translateY(3px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.ps-row__bar.is-in{ opacity: 1; transform: none; }
.ps-row__fill{
  position: absolute; top: 50%; left: 0; transform: translateY(-50%);
  height: 4px; border-radius: 2px; background: var(--primary-15);
}
.ps-row__dot{
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--paper);
  box-shadow: 0 1px 3px rgba(0,0,0,0.16);
}
.ps-row__meta{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.ps-row__name{
  font-size: var(--fs-md); color: var(--ink); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ps-row__price{
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  color: var(--ink); font-variant-numeric: tabular-nums; flex: none;
}
.ps-tag{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.05em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 999px; flex: none;
}
.ps-tag--anchor{ background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.ps-tag--step{ background: var(--primary-08); color: var(--primary); border: 1px solid var(--primary-15); }

/* Âncora: dot dourado e fill levemente reforçado */
.ps-row--anchor .ps-row__dot{ background: var(--accent); width: 13px; height: 13px; }
.ps-row--step .ps-row__dot{ box-shadow: 0 0 0 3px var(--primary-08); }

/* Marca do vão: linha dourada tracejada acima do item que abre o gap */
.ps-gapmark{
  position: absolute; top: 0; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--accent);
}

.pricestair__notes{ display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.ps-note{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink);
}
.ps-note b{ font-weight: 600; }
.ps-note__ico{ flex: none; font-size: var(--fs-md); line-height: 1.4; }
.ps-note--gap{ background: var(--accent-soft); border-left: 3px solid var(--accent); }
.ps-note--step{ background: var(--primary-04); border-left: 3px solid var(--primary-15); }
.ps-note--ok{ background: var(--positive-bg); border-left: 3px solid var(--positive); color: var(--positive); }
.ps-note--ok .ps-note__ico{ color: var(--positive); }
/* O prato que falta — a lista fica DENTRO da nota do vão, um degrau abaixo da
   frase que a abriu. Fora dela viraria bloco irmão e competiria com o vão pela
   atenção; a ideia só existe por causa do vão e lê como continuação dele. */
.ps-ideas{
  display: block; margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--accent);
}
.ps-ideas__group + .ps-ideas__group{ margin-top: 10px; }
.ps-ideas__lede{
  display: block; font-size: var(--fs-sm); color: var(--muted);
  margin-bottom: 6px;
}
.ps-ideas__list{ display: flex; flex-wrap: wrap; gap: 6px; }
/* A metade da cidade é horizonte, não a resposta: mesma pílula, contorno mais
   apagado. Se as duas viessem com a mesma força visual, a leitura da cidade
   competiria com a da cozinha do dono — que é justamente a que ele pediu. */
.ps-ideas__group--wide .ps-idea{ border-color: var(--border-strong); }
.ps-ideas__group--wide .ps-idea__price{ color: var(--muted); }
.ps-idea{
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--accent);
}
.ps-idea__name{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ps-idea__price{
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
/* Quantas casas servem é a PROVA da ideia, não a ideia — fica em corpo menor,
   mas fica: sugestão de prato sem lastro é chute, e o dono precisa ver o
   lastro sem clicar em nada. */
.ps-idea__n{ font-size: var(--fs-xs); color: var(--muted); }

/* As notas de âncora e de "sem cifrão" saíram daqui na fusão com o Diagnóstico
   de preço — a leitura do teto era a mesma conta do cartão PRATO-ÂNCORA e o
   conselho de menu design virou o cartão SEM CIFRÃO. Estilos correspondentes
   agora vivem em .pricediag__strip-*. */

@media (max-width: 640px){
  .pricestair{ padding: 20px 16px 22px; }
  .ps-row__name{ font-size: var(--fs-sm); gap: 6px; }
  .ps-note{ font-size: var(--fs-sm); }
  /* No celular a pílula inteira não cabe em linha: cada ideia ocupa a largura
     e o preço encosta na direita, que é como o resto do app lê valor. */
  .ps-ideas__list{ flex-direction: column; }
  .ps-idea{ width: 100%; border-radius: var(--r-sm); }
  .ps-idea__name{ flex: 1 1 auto; min-width: 0; }
}

/* ===================================================================
   Diagnostico de Pricing (F4b) — 4 metricas literais em cartoes.
   Mesmo padrao editorial das outras seçoes (Fraunces no titulo, paleta
   petroleo/dourado). Grid 2x2 desktop, 1 col mobile. Numero grande
   + leitura editorial curta. Sem hover/tooltip — auto-explicativo no PDF.
   =================================================================== */
.pricediag{
  margin: 4px 0 8px;
  padding: 24px 28px 28px;
  border-bottom: 1px solid var(--border);
}
.pricediag[hidden]{ display: none !important; }
.pricediag__head{ margin-bottom: 22px; }
.pricediag__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.pricediag__title{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em;
}
.pricediag__lede{
  font-size: var(--fs-md); color: var(--muted); margin: 0;
  max-width: 64ch; line-height: 1.5;
}
.pricediag__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.pricediag__card{
  display: flex; flex-direction: column;
  padding: 18px 20px 20px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  min-height: 168px;
}
/* Cartão largo: o SEM CIFRÃO fecha a grade ocupando as duas colunas. Com 5
   cartões numa grade de 2, o último sobraria sozinho e abriria um buraco à
   direita; e o par antes/depois quer a linha inteira mesmo. */
.pricediag__card--wide{ grid-column: 1 / -1; min-height: 0; }
.pricediag__eyebrow-tag{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  font-weight: 600; margin-bottom: 8px;
}
.pricediag__strip-pair{ display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; font-family: var(--font-mono); }
.pricediag__strip-from{ color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.pricediag__strip-arrow{ color: var(--muted); }
.pricediag__strip-to{ color: var(--ink); font-weight: 600; }
.pricediag__value{
  font-family: var(--font-display); font-weight: 500;
  font-size: 2.4rem; line-height: 1;
  color: var(--ink); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.pricediag__value--mute{ color: var(--muted); font-weight: 400; }
.pricediag__value--yes{ color: var(--positive); }
.pricediag__value--no{ color: var(--primary); }
.pricediag__sub{
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--muted); letter-spacing: 0.01em;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.pricediag__read{
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-md); line-height: 1.45;
  color: var(--ink);
}
/* Definicao da alavanca — vem antes do numero pra quem nunca ouviu o termo
   saber o que esta sendo medido. */
.pricediag__what{
  font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
  margin: 0 0 14px; max-width: 46ch;
}
.pricediag__block{ margin-top: 14px; }
.pricediag__block:not(:last-child){ margin-bottom: 16px; }
.pricediag__label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
.pricediag__ex{
  font-size: var(--fs-sm); line-height: 1.6; color: var(--ink); margin: 0;
  font-variant-numeric: tabular-nums;
}
.pricediag__cost{ color: var(--muted); }
/* O "o que fazer" fecha o cartao — encostado no rodape pra os quatro cartoes
   terminarem na mesma linha mesmo com exemplos de tamanhos diferentes. */
.pricediag__do{
  margin-top: auto; padding: 12px 14px;
  background: var(--primary-04);
  border-left: 3px solid var(--primary-15);
  border-radius: var(--r-sm);
}
.pricediag__do .pricediag__label{ color: var(--primary); }
.pricediag__note{
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--primary-04);
  border-left: 3px solid var(--primary-15);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink);
}
@media (max-width: 640px){
  .pricediag{ padding: 20px 16px 22px; }
  .pricediag__grid{ grid-template-columns: 1fr; gap: 12px; }
  .pricediag__card{ min-height: 0; padding: 14px 16px 16px; }
  .pricediag__value{ font-size: 2rem; }
  .pricediag__read{ font-size: var(--fs-md); }
  .pricediag__what{ font-size: var(--fs-sm); margin-bottom: 12px; }
  .pricediag__ex{ font-size: var(--fs-sm); }
  .pricediag__do{ padding: 10px 12px; }
}

/* ===================================================================
   De qual casa é este cardápio — linha no topo da tela de trabalho.
   Peso visual de rótulo, não de decisão: na esmagadora maioria das visitas
   ela só CONFIRMA (uma casa, já escolhida). Quem tem mais de uma troca aqui,
   e quem tem uma só abre a segunda por aqui.
   =================================================================== */
.intake-casa{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 2px 4px 14px;
  border-bottom: 1px solid var(--primary-08);
  margin-bottom: 14px;
}
.intake-casa__label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60);
}
.intake-casa__sel{
  font: inherit; font-size: var(--fs-md); font-weight: 600; color: var(--primary);
  background: var(--primary-04); border: 1px solid var(--primary-15);
  border-radius: var(--r-md); padding: 7px 10px; max-width: 100%;
  /* O nome da casa com endereço é longo; truncar no campo é melhor que
     estourar a linha e empurrar o "Ver ficha" pra fora da tela no celular. */
  min-width: 0; flex: 0 1 auto; text-overflow: ellipsis;
}
.intake-casa__sel:focus-visible{ outline: 2px solid var(--primary); outline-offset: 1px; }
.intake-casa__ficha{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  color: var(--primary-60); background: none; border: none; cursor: pointer;
  padding: 4px 2px; text-decoration: underline; text-underline-offset: 3px;
}
.intake-casa__ficha:hover{ color: var(--primary); }

/* ===================================================================
   O cardápio guardado da casa

   Aparece quando a casa TEM cardápio e a tela está vazia — o momento em
   que o dono, antes, concluía que ia ter que subir tudo de novo. A cor é
   a de coisa que está de pé (não alerta): o cartão informa uma posse, não
   uma pendência. "Excluir" fica visualmente mais discreto que as outras
   duas portas de propósito — é a única irreversível.
   =================================================================== */
.cardapio-guardado{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px;
  padding: 13px 15px; margin-bottom: 16px;
  background: var(--primary-04);
  border: 1px solid var(--primary-15);
  border-radius: var(--r-md);
}
.cardapio-guardado[hidden]{ display: none; }
.cardapio-guardado__info{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cardapio-guardado__title{
  font-size: var(--fs-md); font-weight: 600; color: var(--primary); letter-spacing: -0.01em;
}
.cardapio-guardado__meta{ font-size: var(--fs-sm); color: var(--muted); }
.cardapio-guardado__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cardapio-guardado__del{ color: var(--muted); }
.cardapio-guardado__del:hover{ color: var(--danger); border-color: currentColor; }
@media (max-width: 560px){
  .cardapio-guardado{ align-items: stretch; }
  .cardapio-guardado__actions{ width: 100%; }
  .cardapio-guardado__actions .btn{ flex: 1 1 auto; justify-content: center; }
}

/* ===================================================================
   Cardápio de concorrente — a oferta fora do <details> de escopo
   =================================================================== */
.rivals-entry{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 10px 16px 0; padding: 0;
  font-size: var(--fs-sm); color: var(--muted);
}
.rivals-entry__ask{ color: var(--primary-60); }
.rivals-entry__hint{ flex: 1 1 220px; min-width: 0; font-size: var(--fs-sm); }

@media (max-width: 640px){
  /* No celular a frase inteira numa linha só quebra no meio do botão.
     Empilha: pergunta, botão, explicação. E o alvo de toque do seletor de
     casa sobe pros 44px que iOS/Android pedem — o leitor típico aqui tem
     50+ e opera de pé, no salão. */
  .rivals-entry{ margin: 10px 12px 0; }
  .rivals-entry__hint{ flex: 1 1 100%; }
  .intake-casa__sel{ flex: 1 1 100%; min-height: 44px; }
  .intake-casa__ficha{ min-height: 44px; }
}

/* ===================================================================
   Seletor de canal (segmented control custom — salão x delivery)
   =================================================================== */
.channel{
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 4px 16px 0;
}
.channel__label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60);
}
.channel__hint{
  color: var(--muted); font-size: var(--fs-sm); flex: 1 1 200px; min-width: 0;
  transition: color .2s var(--ease);
}

.seg{
  position: relative; display: inline-flex; flex: none;
  background: var(--primary-04);
  box-shadow: inset 0 1px 2px var(--primary-08);
  border-radius: 999px; padding: 4px;
}
.seg__thumb{
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  background: var(--primary); border-radius: 999px;
  box-shadow: 0 1px 3px rgba(26,43,60,0.25);
  transition: transform .22s cubic-bezier(.32,.72,.28,1);
  transform: translateX(0);
}
.seg[data-active="delivery"] .seg__thumb{ transform: translateX(100%); }
.seg__opt{
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 22px; border-radius: 999px;
  color: var(--primary-60); white-space: nowrap;
  transition: color .22s var(--ease), opacity .2s var(--ease);
}
.seg__opt:hover{ color: var(--ink); }
.seg__opt.is-active{ color: #fff; }
.seg__opt.is-active:hover{ color: #fff; }
.seg__opt:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  .seg__thumb{ transition: none; }
}

/* Resultado "vencido" — canal mudou após análise, precisa reanalisar */
.result.is-stale{ opacity: 0.4; transition: opacity .2s var(--ease); pointer-events: none; }
.result__staleflag{
  position: sticky; top: 0; z-index: 2;
  margin: 0 0 16px; padding: 12px 18px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--r-md);
  font-size: var(--fs-md); color: var(--ink);
  pointer-events: auto;
}
.result.is-stale .result__staleflag{ opacity: 1; }

/* ===================================================================
   Nota de proxy — comparando contra outro canal por falta de amostra
   =================================================================== */
/* hidden sempre vence display (evita overlay/banner preso visível) */
.proxy-note[hidden], .result__staleflag[hidden]{ display: none !important; }

.proxy-note{
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 20px; padding: 14px 18px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.proxy-note__tag{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; background: var(--accent);
  padding: 3px 8px; border-radius: var(--r-sm); flex: none; margin-top: 1px;
}
.proxy-note__text{
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-md); color: var(--ink); line-height: 1.5;
}

/* Aviso de recorte por bairro/cozinha. Reusa o esqueleto do proxy-note.
   Quando o recorte foi efetivamente usado (amostra robusta), entra em tom
   positivo; quando caiu para a base ampla por amostra fraca, fica no tom de
   atenção (accent) — mesma honestidade do proxy. */
.recorte-note[hidden]{ display: none !important; }
.recorte-note.is-applied{
  border-left-color: var(--positive, #2e7d52);
  background: var(--positive-bg, rgba(46,125,82,0.08));
}
.recorte-note.is-applied .proxy-note__tag{ background: var(--positive, #2e7d52); }

/* Lente de recorte no relatório: troca o universo da comparação sem reextrair
   o cardápio. Fica ACIMA da nota de recorte porque é a causa do que a nota
   diz. Botões largos e legíveis — cada um carrega rótulo (o recorte) e dica
   (o que aquilo significa em português), porque "bairro" e "cozinha" sozinhos
   não dizem ao dono o que ele ganha ou perde ao trocar. */
.lens[hidden]{ display: none !important; }
/* ===== Barra "contra o que estou sendo comparado" =====
   Junta o seletor de recorte, a régua declarada e as duas ressalvas de
   procedência (proxy de canal e queda pra base ampla). Eram quatro faixas
   empilhadas entre o resumo e o primeiro dado, todas respondendo alguma
   variação da mesma pergunta. A ordem interna é a de uso: primeiro escolho
   contra quem comparar, depois leio o que essa escolha implica. */
.scopebar{
  margin: 0 0 22px; padding: 14px 16px 4px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--paper);
}
.scopebar[hidden]{ display: none !important; }
/* Dentro da barra as peças perdem a margem e a moldura próprias — a barra é
   a moldura agora. */
.scopebar .lens{ margin: 0 0 10px; }
.scopebar .posruler{ margin: 0 0 10px; padding: 0 0 0 12px; }
.scopebar__notes:empty{ display: none; }
.scopebar .proxy-note{ margin: 0 0 10px; padding: 10px 14px; }
.scopebar .proxy-note:last-child{ margin-bottom: 10px; }

/* ===== Tamanho da base, permanente no relatório =====
   Deliberadamente MAIS discreta que as notas de exceção abaixo dela: aquelas
   são ressalva (fundo, borda colorida, tag branca sobre cor), esta é fato de
   contexto. Se as duas tivessem o mesmo peso, um relatório saudável pareceria
   um relatório com três avisos. */
.basestrip[hidden]{ display: none !important; }
.basestrip{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
}
.basestrip__tag{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); font-weight: 600;
  flex: none;
}
.basestrip__text{ font-size: var(--fs-md); color: var(--muted); line-height: 1.5; }
.basestrip__more{
  padding: 0; border: 0; background: transparent; cursor: pointer;
  font-size: var(--fs-sm); color: var(--primary);
  text-decoration: underline; text-underline-offset: 2px;
}
.basestrip__more:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }

/* ===== O inventário da base (modal) ===== */
.modal--base{ max-width: 560px; }
.basemodal__head{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 18px;
}
.basemodal__eyebrow{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--primary-60); font-weight: 600;
}
.basemodal__title{
  font-family: var(--font-display); font-size: var(--fs-xl); color: var(--primary);
  letter-spacing: -0.01em; margin-top: 4px;
}
.basemodal__close{
  flex: none; width: 30px; height: 30px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: transparent; color: var(--muted); font-size: var(--fs-lg); cursor: pointer;
}
.basemodal__close:hover{ border-color: var(--primary); color: var(--primary); }
.basemodal__big{
  font-family: var(--font-display); font-size: 2rem; color: var(--ink);
  line-height: 1.1; margin-bottom: 18px;
}
.basemodal__big-sub{
  display: block; font-family: var(--font-body, inherit);
  font-size: var(--fs-md); color: var(--muted); margin-top: 6px; letter-spacing: 0;
}
.basemodal__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 14px;
}
.basemodal__cell{
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface, var(--paper));
}
.basemodal__cell-num{
  font-family: var(--font-display); font-size: var(--fs-xl); color: var(--ink); line-height: 1;
}
.basemodal__cell-lbl{ font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.basemodal__cell-lbl em{ font-style: italic; opacity: 0.85; }
/* Nota de rodapé da grade, não parágrafo solto: ela qualifica o número da
   terceira célula e precisa ser lida colada nele. */
.basemodal__note{
  font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
  margin: -4px 0 16px;
}
.basemodal__note b{ color: var(--ink); font-weight: 600; }
.basemodal__stamp{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--primary-60); margin: 0 0 20px;
}
.basemodal__sub{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--primary-60); font-weight: 600;
  margin: 0 0 10px;
}
/* A réplica de salão no inventário: nota de bloco, abaixo da grade dos canais.
   Fica FORA das células de propósito — o número dela não soma com os de lá, e
   um card ao lado dos outros três diria justamente que soma. */
.basemodal__nota{
  margin: -4px 0 18px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--primary-60);
  border-radius: var(--r-md);
  background: var(--surface, var(--paper));
  font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
}
.basemodal__nota b{ color: var(--ink); font-weight: 600; }
.basemodal__chips{
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
  padding: 0; margin: 0 0 20px;
}
.basemodal__chip{
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 100px;
  font-size: var(--fs-sm); color: var(--muted);
}
.basemodal__chip b{ color: var(--ink); font-weight: 600; }
.basemodal__search{
  width: 100%; padding: 9px 12px; margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink); font-size: var(--fs-md);
}
.basemodal__search:focus{ outline: none; border-color: var(--primary); }
/* Rolagem própria: a lista tem os 107 bairros da base e é ela que responde
   "o meu está aí?". Cortar a lista pra caber na tela seria devolver a
   pergunta sem resposta pra quem não é dos bairros grandes. */
.basemodal__bairros{
  list-style: none; padding: 0; margin: 0;
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.basemodal__bairro{
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 12px; border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.basemodal__bairro:last-child{ border-bottom: 0; }
.basemodal__bairro[hidden]{ display: none !important; }
.basemodal__bairro-nome{ flex: 1; color: var(--ink); }
.basemodal__bairro-n{ font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); }
.basemodal__bairro-det{ font-size: var(--fs-xs); color: var(--muted); }
.basemodal__none{ font-size: var(--fs-sm); color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.basemodal__empty{ font-size: var(--fs-md); color: var(--muted); }
@media (max-width: 640px){
  .basemodal__grid{ grid-template-columns: 1fr; }
  .basemodal__big{ font-size: var(--fs-2xl); }
}

.lens{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px;
}
.lens__eyebrow{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); font-weight: 600;
  flex: none;
}
.lens__opts{ display: flex; gap: 8px; flex-wrap: wrap; }
.lens__opts[aria-busy="true"]{ opacity: 0.5; pointer-events: none; }
.lens__opt{
  display: flex; flex-direction: column; gap: 1px; text-align: left;
  appearance: none; cursor: pointer;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.lens__opt:hover{ border-color: var(--primary-15); }
.lens__opt.is-active{
  border-color: var(--primary);
  background: var(--primary-04);
  box-shadow: 0 0 0 3px var(--primary-04);
}
.lens__opt-label{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.lens__opt-hint{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.03em;
  color: var(--muted);
}
.lens__busy[hidden]{ display: none !important; }
.lens__busy{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
/* No PDF a lente não faz sentido: é um controle, não informação. A nota de
   recorte logo abaixo é que carrega a verdade do escopo pro papel. */
@media print{ .lens{ display: none !important; } }

/* Pill por linha quando AQUELE item caiu para a base ampla (recorte fraco). */
.scope-pill{
  display: inline-block; margin-left: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; vertical-align: middle;
  padding: 2px 6px; border-radius: var(--r-sm);
  color: var(--accent); border: 1px solid var(--accent);
  background: var(--accent-soft);
}
/* A mesma pill quando o dono DECLAROU bairro e a régua veio de fora dele.
   Preenchida, não só contornada: "base ampla" é procedência (informação de
   rodapé), "fora do seu bairro" é ressalva sobre a validade do número ao lado —
   e ressalva que some no meio de quatro pills não é ressalva. */
.scope-pill--fora{
  color: var(--ink); background: var(--accent); border-color: var(--accent);
  font-weight: 600;
}

/* ===================================================================
   Banda de prateleira — o prato sem par comparado contra a ESTANTE
   (prato principal / entrada / sobremesa da região), não contra um
   prato igual, que não existe na base.

   Tom deliberadamente APAGADO, mais fraco que a linha comparada: o
   número da prateleira ocupa a mesma coluna da mediana do prato e
   não pode competir com ela em peso visual. Quem tem par de verdade
   continua sendo a informação forte da tabela.
   =================================================================== */
.shelf-pill{
  display: inline-block; margin-left: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
  border: 1px dashed var(--muted); border-radius: 999px;
  padding: 0 6px; vertical-align: middle;
}
/* Onde o preço do dono cai na banda. Piso e teto são as duas pontas que
   pedem leitura; o miolo é informação neutra e fica em cinza. */
.shelf-pos{
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.04em; color: var(--muted);
}
.shelf-pos--piso{ color: #2E7D5B; }
.shelf-pos--teto{ color: var(--gold-deep); }

/* No estreito a coluna da mediana tem 66px e a coluna da recomendação some
   (style.css, @560). "R$ 93 PRATELEIRA" em fluxo horizontal transborda por
   cima da coluna do preço do dono — os dois números ficam um sobre o outro.
   Empilhado, o pill cabe; e como a frase explicativa não existe nesta largura,
   ele é o único aviso de que aquele número é a estante, não o prato. */
@media (max-width: 560px){
  .row--unmatched .cell--price{ flex-direction: column; align-items: flex-end; gap: 1px; }
  .shelf-pill{ margin-left: 0; font-size: var(--fs-2xs); letter-spacing: 0.02em; padding: 0 4px; }
}

/* Badge "proxy" por linha da tabela */
/* AS ETIQUETAS SAÍRAM DE DENTRO DO NOME DO PRATO.
   No celular o nome ganha -webkit-line-clamp: 2 + overflow hidden, e as
   etiquetas, que moravam dentro dele, eram CORTADAS junto com o texto — a
   marca de "comparado com delivery" simplesmente não existia no celular, que é
   onde o dono lê. Agora elas vivem numa linha própria, logo abaixo do nome,
   e o clamp corta só o que ele tem que cortar: o nome. */
.item-pills{
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.item-pills:empty{ display: none; }
/* Dentro da linha própria a margem lateral de cada etiqueta vira redundante —
   quem separa é o gap. */
.item-pills > *{ margin-left: 0 !important; }

.proxy-pill{
  display: inline-block; margin-left: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 0 6px; vertical-align: middle;
}

/* Canal carimbado no eyebrow do resultado */
.result-region__channel{ color: var(--primary); font-weight: 600; }

/* O canal colado no NÚMERO da coluna de mercado. Quem varre a coluna de cima a
   baixo (que é como se lê tabela de preço) via "R$ 51" e "R$ 81" um embaixo do
   outro sem nada dizendo que saíram de mercados diferentes. Discreto de
   propósito: é qualificador do número, não alarme. */
.market-channel-tag{
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
}
/* A célula de preço é uma linha flex sem quebra: sem isto o rótulo cola no
   número ("R$ 51NO DELIVERY"). Com o rótulo dentro, ela vira coluna — o
   mercado fica embaixo do valor, que é onde se lê. min-width: 0 porque a
   célula é fração de grid: sem ele o rótulo empurra a largura e invade a
   coluna da diferença (no celular ele saía por cima do "+92%"). */
.cell--price:has(.market-channel-tag){
  flex-direction: column; align-items: flex-end; justify-content: center; gap: 0;
  min-width: 0; overflow: visible;
}
.market-channel-tag{ white-space: nowrap; }
@media (max-width: 640px){
  /* No celular a coluna de mercado tem 68px fixos: o rótulo não cabe sem
     passar por cima da diferença ao lado. Ele sai — e não faz falta, porque
     ali a linha vira cartão e a etiqueta "comparado com delivery" está a dois
     dedos, dentro do mesmo bloco. Marca demais em espaço de menos vira
     sobreposição, que é pior que marca nenhuma. */
  .market-channel-tag{ display: none; }
}
@media print{ .market-channel-tag{ color: #7a5c1a; } }

/* ===================================================================
   Baixa amostragem (n < limiar) — referência fraca, não recomendação
   Tom âmbar-ocre dessaturado: "atenção" sem virar vermelho de erro.
   =================================================================== */
.lowsample-chip{
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--gold-deep);
}
.lowsample-ico{ flex: none; opacity: 0.9; }
.lowsample-n{ font-variant-numeric: tabular-nums; }

/* Pill "amostra rasa" ao lado do nome — único canal do aviso no mobile estreito */
.lowsample-pill{
  display: inline-block; margin-left: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-deep);
  border: 1px solid var(--gold-soft); border-radius: 999px;
  padding: 0 6px; vertical-align: middle;
}

/* Pill "ajustado: <token> +XX%" — sinaliza que a mediana usada na comparação
   foi deslocada por um qualificador nobre no nome do prato (ex.: costela,
   angus, brisket). Tom neutro: informativo, não alerta. Complementada pela
   nota "orig R$X" logo abaixo da mediana comparada. */
.qualifier-pill{
  display: inline-block; margin-left: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: #5A6577;
  border: 1px solid #A9B4C5; border-radius: 999px;
  padding: 0 6px; vertical-align: middle;
  background: #F1F4F9;
}
.qualifier-note{
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--muted); font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* A linha inteira perde peso: a leitura vale menos, sem precisar de badge pesado */
.row--low-sample .cell--reco .reco{ color: var(--muted); font-style: italic; }

/* Frase-gestor: verbo em maiúscula chumbo, papel do prato em itálico
   subordinado, teto nacional numa linha secundária discreta. */
.cell--reco .reco strong{
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink, var(--primary));
}
.cell--reco .reco em{
  display: block;
  margin-top: 6px;
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.ceiling-note{
  display: block;
  margin-top: 6px;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Quem entrou na comparação da linha. Nasce fechado: o relatório continua
   sendo a frase de gestor, não uma lista de vinte nomes. Aberto, é a
   conferência que o dono antes só conseguia pedindo pra gente. */
.peer-houses{
  margin-top: 8px;
  font-size: var(--fs-xs);
}
.peer-houses > summary{
  cursor: pointer;
  color: var(--muted);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  border-bottom: 1px dotted currentColor;
}
.peer-houses > summary::-webkit-details-marker{ display: none; }
.peer-houses > summary::before{
  content: '▸';
  font-size: 0.7em;
  transition: transform 0.12s ease;
}
.peer-houses[open] > summary::before{ transform: rotate(90deg); }
.peer-houses > summary:hover{ color: var(--fg); }

.peer-houses__nota{
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.45;
  max-width: 46ch;
}
/* O token vem normalizado (sem acento, minúsculo) porque é a chave que casou
   o nome do prato. Solto no meio da frase ele lê como erro de digitação; como
   etiqueta, lê como o que é — e é o mesmo vocabulário da pill "AJUSTADO:
   CAMARAO +10%" que a linha já mostra em cima. */
.peer-houses__token{
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.92em;
  color: var(--fg);
}
.peer-houses__list{
  list-style: none;
  margin: 7px 0 0;
  padding: 0 0 0 9px;
  border-left: 2px solid var(--border, rgba(128,128,128,0.25));
  /* Vinte casas abertas empurram o resto do relatório pra fora da tela. A
     lista rola dentro de si: quem abriu quer conferir a procedência, não
     perder o lugar na tabela. No impresso o teto sai (regra @media print). */
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Grid de duas colunas em vez de flex de três itens: a célula de recomendação
   é estreita, e três spans lado a lado picotavam cada casa em quatro linhas
   de duas palavras. Nome e preço dividem a primeira linha (preço encostado à
   direita, que é como se lê uma régua); o lugar cai na linha de baixo, com a
   largura inteira. */
.peer-house{
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 8px;
  padding: 4px 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.peer-house + .peer-house{ border-top: 1px solid var(--border, rgba(128,128,128,0.14)); }
.peer-house__nome{
  grid-column: 1;
  color: var(--fg);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.peer-house__preco{
  grid-column: 2;
  text-align: right;
  white-space: nowrap;
  align-self: start;
}
/* Preço de mesa ESTIMADO a partir do cardápio de entrega da casa (réplica de
   salão). Fica visualmente mais fraco que o preço observado de propósito: numa
   lista em que a maioria pode ser estimativa, o peso igual faria os dois tipos
   de número parecerem a mesma coisa. O "~" e a palavra fazem o resto. */
.peer-house__preco--estimado{ color: var(--muted); }
/* Mesma marca, na lista de "mais próximos de você" do mapa. */
.compmap__est{ color: var(--muted); font-size: 0.92em; }
.peer-house__preco--estimado em{
  font-style: normal;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.85;
}
.peer-house__lugar{
  grid-column: 1 / -1;
  font-size: 0.92em;
  line-height: 1.3;
}
/* A rua identifica a casa; o que vem depois dela (bairro ou distância) diz se
   aquela casa vale como comparação. Ela puxa um pouco mais de tinta que o resto
   da linha justamente porque é o dado que o olho procura ao varrer a lista. */
.peer-house__rua{ color: var(--ink); }
.peer-house__rua + *::before{ content: ' '; }
/* Casa que entrou por afrouxamento de bairro fica visivelmente mais fraca:
   ela conta na mediana, mas não é vizinha, e a lista não pode sugerir que é. */
.peer-house--far .peer-house__nome{ color: var(--muted); }

/* Impresso: a lista abre por padrão. Um <details> fechado no PDF esconde a
   procedência justamente de quem leva o relatório pra reunião. */
@media print{
  .peer-houses{ font-size: 0.68rem; }
  .peer-houses > summary{ border-bottom: none; }
  .peer-houses > summary::before{ content: ''; }
  /* Sem teto nem rolagem no papel: o que não coube na altura simplesmente
     não existiria pra quem lê impresso. */
  .peer-houses__list{ max-height: none; overflow: visible; }
  .peer-house{ break-inside: avoid; }
}

/* Normalização por gramagem — linha subordinada ao preço cheio */
.price-per-unit{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--muted); font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
/* Marca de R$/100ml estimado a partir do volume de referência da categoria
   (bebida sem volume declarado). O ~ref herda o vocabulário de "aproximado"
   do resto do app; cursor de ajuda sinaliza que há explicação no hover. */
.price-per-unit--ref{ cursor: help; }
.pu-ref{ opacity: 0.6; font-style: italic; }
/* Nota de desvio de gramagem vs referência da categoria.
   position: relative garante que a nota fique no fluxo (não sobreponha células
   vizinhas no PDF impresso quando a célula-mãe encolhe abaixo do preço).
   Também limita a largura pra evitar vazamento pra direita. */
.price-mismatch{
  display: block;
  position: relative;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.02em;
  color: var(--gold-deep); margin-top: 4px;
  border: 1px solid var(--gold-soft); border-radius: var(--r-sm);
  padding: 1px 6px; width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  clear: both;
}

/* Rangechart: faixa indicativa de amostra rasa */
.rc-row--low .rc-band{ opacity: 0.45; }
.rc-row__low{
  margin-left: 8px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-deep);
  border: 1px solid var(--gold-soft); border-radius: 999px; padding: 0 6px;
  vertical-align: middle; white-space: nowrap;
}

/* Sugestão de preço por item (status below, amostra sólida) */
.suggestion-pill{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  color: #fff;
  background: #1A7A3A;
  border-radius: var(--r-sm);
  padding: 4px 10px;
  margin-bottom: 6px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  width: fit-content;
}
.suggestion-pill__gain{
  font-weight: 400;
  opacity: 0.82;
  font-size: var(--fs-xs);
}
/* Desktop: pill na col de leitura; mobile (≤560px): pill na col de item */
.suggestion-pill--mobile{ display: none; }
.suggestion-pill--desktop{ display: block; }
@media (max-width: 560px){
  .suggestion-pill--mobile{
    display: inline-flex; align-items: baseline; gap: 4px;
    white-space: nowrap;
    font-size: var(--fs-2xs); padding: 3px 8px; margin-top: 4px; margin-bottom: 2px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .suggestion-pill--mobile .suggestion-pill__gain{ font-size: var(--fs-2xs); }
  .suggestion-pill--desktop{ display: none; }
}

/* Efeito de faturamento estimado por item (status below) */
.billing-impact{
  display: block;
  font-size: var(--fs-sm); font-weight: 500;
  color: #1A7A3A;
  margin-top: 6px;
  letter-spacing: 0.01em;
}

/* Cenários lado a lado — modo Análise geral. Substitui a pill de sugestão
   única quando o dono não escolheu um viés e quer ver Volume/Equilíbrio/
   Premium num piscar. Mesmo tom neutro das outras notas de linha. */
.scenarios-line{
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted, #4A4A4A);
  margin-top: 6px;
  letter-spacing: 0.01em;
}
.scenarios-line strong{ color: var(--ink, #1a1a1a); font-weight: 600; }

/* Aviso de estimativa no painel de gap */
.gap__disclaimer{
  display: block;
  font-size: var(--fs-xs); color: var(--muted);
  margin-top: 8px;
  font-style: italic;
}

/* ===================================================================
   ABERTURA — 3 números grandes (F2.1).
   Três cards lado a lado: deixando na mesa · ticket vs mercado ·
   faça isso primeiro. Sem gráfico, sem título de seção — os números
   falam. Card de oportunidade em âmbar (mesma família revenue-block:
   oportunidade, não promessa). Os outros dois neutros.
   Repouso honesto: card sem dado real vira bloco-convite compacto
   (data-state="invite"), o número gigante some — não fingimos "—".
   =================================================================== */
/* ================= O QUE MUDOU NA REGIÃO =================
   O bloco da releitura. Mora acima da leitura do relatório porque quem
   rodou de novo veio atrás desta pergunta e de mais nenhuma.

   Dois tons, e a diferença entre eles é de temperatura, não de alarme:
   'ativo' quando alguma coisa se moveu (barra em âmbar, como todo bloco
   deste app que pede decisão) e 'calmo' quando a região não mexeu — e aí
   o bloco continua na tela, em verde discreto, porque "conferi e está
   igual" é entrega, não tela vazia. A cor nunca carrega sentido sozinha:
   a frase do topo já diz tudo. */
.regiao-mudou{
  margin: 0 0 20px;
  padding: 22px 26px 20px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r-md);
}
.regiao-mudou[hidden]{ display: none !important; }
.regiao-mudou[data-tom="ativo"]{ border-left-color: var(--accent); }
.regiao-mudou[data-tom="calmo"]{ border-left-color: var(--positive); }

.regiao-mudou__top{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.regiao-mudou__eyebrow,
.regiao-mudou__quando{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
}
.regiao-mudou__quando{ letter-spacing: 0.04em; text-transform: none; }

.regiao-mudou__head{
  font-family: var(--font-display);
  font-size: var(--fs-xl); line-height: 1.3; font-weight: 500;
  color: var(--ink); margin: 0; max-width: 46ch;
  text-wrap: balance;
}

.regiao-mudou__list{
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.regiao-mudou__list:empty{ display: none; }
/* Grid de duas colunas: o texto corre à esquerda e as marcas de movimento
   ficam alinhadas à direita, uma embaixo da outra entre os pratos. Em
   coluna única (celular) elas descem pra baixo da frase, na ordem de
   leitura. */
.regiao-mudou__item{
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 4px 18px;
  padding-left: 16px; position: relative;
  font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
}
.regiao-mudou__item::before{
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border-strong);
}
/* Prato que trocou de posição é o único que pede decisão: ganha o ponto
   cheio na cor de atenção. O resto é informação de contexto. */
.regiao-mudou__item[data-tipo="posicao"]::before{ background: var(--accent); }
.regiao-mudou__prato{
  grid-column: 1; font-weight: 600;
}
.regiao-mudou__txt{ grid-column: 1; min-width: 0; }
.regiao-mudou__tags{
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  white-space: nowrap;
}
.regiao-mudou__mov{
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.02em;
}
.regiao-mudou__mov[data-dir="sobe"]{ color: var(--accent); }
.regiao-mudou__mov[data-dir="desce"]{ color: var(--muted); }
.regiao-mudou__regua{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
}
.regiao-mudou__foot{
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
}
.regiao-mudou__foot[hidden]{ display: none !important; }

@media (max-width: 640px){
  .regiao-mudou{ padding: 18px 16px 16px; }
  .regiao-mudou__head{ font-size: var(--fs-lg); }
  .regiao-mudou__item{
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .regiao-mudou__tags{
    grid-column: 1; grid-row: auto;
    flex-direction: row; align-items: baseline; gap: 10px;
    flex-wrap: wrap;
  }
}

/* ================= O QUE ESTE RELATÓRIO DIZ =================
   A leitura antes dos números. Peso tipográfico de manchete de documento,
   não de card de painel: quem abre o relatório tem que bater o olho nesta
   frase antes de qualquer outra coisa da página.

   O tom (data-tone) só muda a cor da barra lateral. O texto nunca depende
   de cor pra ser lido — a frase já diz o que está acontecendo. */
.report-lede{
  margin: 0 0 24px;
  padding: 26px 28px 24px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r-md);
}
.report-lede[hidden]{ display: none !important; }
.report-lede[data-tone="oportunidade"]{ border-left-color: var(--accent); }
.report-lede[data-tone="alerta"]{ border-left-color: var(--danger); }
.report-lede[data-tone="atencao"]{ border-left-color: var(--accent); }
.report-lede[data-tone="bom"]{ border-left-color: var(--positive); }

.report-lede__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
/* A frase. Grande porque é a conclusão — se ela tiver o mesmo peso dos
   achados, o bloco vira lista e a pirâmide desmonta. */
.report-lede__head{
  font-family: var(--font-display);
  font-size: var(--fs-2xl); line-height: 1.24; font-weight: 500;
  color: var(--ink); margin: 0; max-width: 34ch;
  text-wrap: balance;
}

.report-lede__findings{
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
/* Grid e não flex: o link da prova tem que ficar numa coluna própria à
   direita, alinhado com o começo do achado. Em flex ele encostava no fim da
   primeira linha e parecia interromper a frase no meio. */
.report-lede__finding{
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 4px 18px;
  padding-left: 16px; position: relative;
  font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
}
/* Marcador em vez de <li> numerado: os achados não têm ordem de execução,
   têm ordem de força. Numerar sugeriria passo 1, 2, 3 — e o passo está no
   andar de baixo. */
.report-lede__finding::before{
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border-strong);
}
.report-lede__finding-txt{ min-width: 0; }
.report-lede__finding b{ font-weight: 600; }
/* O link pra prova. Discreto: quem confia na frase não precisa dele, e ele
   não pode competir com o texto do achado. */
.report-lede__jump{
  flex: none;
  background: none; border: none; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.report-lede__jump:hover{ color: var(--primary); border-bottom-color: var(--primary-15); }
.report-lede__jump:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

.report-lede__label{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.report-lede__do{
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
.report-lede__do-list{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  counter-reset: ledepasso;
}
.report-lede__do-item{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-left: 24px; position: relative;
  font-size: var(--fs-md); line-height: 1.45; color: var(--ink);
}
/* Aqui a numeração vale: é ordem de execução de verdade. */
.report-lede__do-item::before{
  counter-increment: ledepasso; content: counter(ledepasso) ".";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted);
}
.report-lede__do-txt{ flex: 1 1 24ch; min-width: 0; }
.report-lede__do-detail{
  display: block; font-family: var(--font-mono);
  font-size: var(--fs-xs); color: var(--muted); margin-top: 2px;
}
.report-lede__tag{
  flex: none;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  padding: 3px 9px; border-radius: var(--r-sm);
  background: var(--primary-04); color: var(--muted); white-space: nowrap;
}
.report-lede__tag--money{ background: var(--positive-bg); color: var(--positive); font-weight: 600; }
.report-lede__tag[data-tone="alto"]{ background: var(--accent-soft); color: #7A6220; }

.report-lede__more{
  margin-top: 12px; background: none; border: none; padding: 0;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--muted); cursor: pointer;
  border-bottom: 1px solid var(--primary-15);
}
.report-lede__more:hover{ color: var(--primary); }
.report-lede__more:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* Andar 4 — o que falta. Mais apagado que os outros de propósito: é
   condição de leitura, não achado. */
.report-lede__gaps{
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.report-lede__gaps-txt{
  margin: 0 0 10px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
}

/* O "fiz" na lista do topo: a mesma célula da tabela, em linha. */
.report-lede__do-fiz{ flex: none; }
.report-lede__do-fiz .reco-do{ flex-direction: row; align-items: center; gap: 6px; }
.report-lede__do-fiz .reco-do__form{ min-width: 0; }
.report-lede__do-fiz[data-busy]{ opacity: 0.6; }
.result-region__trocar{
  background: none; border: none; padding: 0; font: inherit; color: var(--muted);
  cursor: pointer; border-bottom: 1px solid currentColor;
}
.result-region__trocar:hover{ color: var(--ink); }
.summary-card__nota{ display: block; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.summary-card[data-state="invite"] .summary-card__nota{ display: none; }
.summary-card__pax{ display: inline-flex; align-items: baseline; gap: 4px; }
.summary-card__pax-input{
  width: 4.5em; font: inherit; font-variant-numeric: tabular-nums; color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 1px 6px; background: var(--surface);
}

@media (max-width: 720px){
  .report-lede{ padding: 20px 18px 18px; }
  .report-lede__head{ font-size: var(--fs-xl); }
  .report-lede__finding, .report-lede__do-item{ font-size: var(--fs-md); }
  /* No celular o link da prova desce pra própria linha: espremido ao lado do
     texto ele sobrava 6 caracteres por linha. */
  .report-lede__finding{ grid-template-columns: 1fr; gap: 4px; }
  .report-lede__jump{ justify-self: start; }
  .report-lede__do-item{ grid-template-columns: 1fr; }
}

/* ============ O CAMINHO ============
   Herda a caixa do report-lede de propósito: é a mesma família de leitura, e
   inventar uma segunda forma pra dizer "leia isto" ensinaria o dono a ler o
   produto duas vezes. O que muda é o peso da manchete — aqui ela é um número
   em reais, e número precisa de mais ar que frase. */
.caminho{ border-left-color: var(--primary); }
.caminho[data-tone="alerta"]{ border-left-color: var(--danger); }
.caminho[data-tone="bom"]{ border-left-color: var(--positive); }
.caminho[data-tone="neutro"]{ border-left-color: var(--border-strong); }

.caminho .report-lede__head{ max-width: 26ch; }
/* O valor dentro da manchete. Tabular pra o número não dançar quando o mês
   vira e a casa das dezenas muda. */
.caminho__valor{ font-variant-numeric: tabular-nums; white-space: nowrap; }

.caminho__sub{
  margin: 12px 0 0; font-size: var(--fs-md); line-height: 1.55; color: var(--ink);
  max-width: 56ch;
}
.caminho__avanco{
  margin: 10px 0 0; font-size: var(--fs-md); line-height: 1.5; color: var(--muted);
  max-width: 56ch;
}
.caminho__avanco[data-dir="frente"]{ color: var(--positive); }
.caminho__avanco[data-dir="tras"]{ color: var(--danger); }

.caminho__fonte-txt{
  margin: 0 0 10px; font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
  max-width: 60ch;
}
.caminho__itens{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
/* Nome à esquerda, dinheiro à direita, e o de/para no meio. Grid porque a
   coluna do dinheiro tem que alinhar entre as linhas — em flex cada prato
   parava num lugar e a lista deixava de ser somável a olho. */
.caminho__item{
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  align-items: baseline;
  font-size: var(--fs-md); line-height: 1.45; color: var(--ink);
}
.caminho__item-nome{ font-weight: 500; }
.caminho__item-preco{
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted);
  grid-column: 1; white-space: nowrap;
}
.caminho__item-valor{
  grid-row: 1 / span 2; grid-column: 2;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--positive); white-space: nowrap; align-self: center;
}
.caminho__mais{ font-size: var(--fs-sm); color: var(--muted); }

.caminho__distancias{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
}
.caminho__distancia b{ font-weight: 600; }

@media (max-width: 720px){
  .caminho .report-lede__head{ max-width: none; }
  .caminho__sub{ font-size: var(--fs-md); }
  /* No celular a coluna do dinheiro espremia o nome do prato em duas letras
     por linha. Tudo desce, e o valor vira a última linha do item. */
  .caminho__item{ grid-template-columns: 1fr; }
  .caminho__item-valor{ grid-row: auto; grid-column: 1; align-self: start; }
}

/* O KPI da fatia. Destacado dos outros três porque não é da mesma natureza:
   os outros descrevem as OPERAÇÕES, e este descreve o bolso de quem lê. Lado
   a lado sem distinção, o olho soma os quatro como se fossem a mesma conta. */
.network__kpi--fatia{
  border: 1px solid var(--accent);
  background: var(--accent-soft, rgba(201,169,97,.10));
}

/* A capa do PDF do mês. Só no papel — na tela o cabeçalho da seção já diz
   isso, e repetir seria ruído. Não é página inteira como a capa do cardápio:
   a leitura do mês é uma peça de reunião, não de venda, e quem abre quer o
   número na primeira folha, não uma capa antes dele. */
@media print{
  .closes__print-capa{
    padding: 0 0 14px;
    margin: 0 0 18px;
    border-bottom: 2px solid var(--border-strong);
  }
  .closes__print-eyebrow{
    display: block;
    font-family: var(--font-mono); font-size: 8pt; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  }
  .closes__print-titulo{
    font-family: var(--font-display); font-weight: 500;
    font-size: 22pt; line-height: 1.1; margin: 0; color: var(--primary);
  }
  .closes__print-meta{
    margin: 6px 0 0; font-size: 9pt; color: var(--muted); line-height: 1.5;
  }
}
.closes__export-wrap{ margin-top: 10px; }

/* ---- A CONTA DO MÊS, ATÉ A ÚLTIMA LINHA ----
   Uma cascata de DRE lida de cima pra baixo. Grid de três colunas pra os
   valores alinharem na vertical: uma cascata em que os números não se
   empilham deixa de ser somável a olho, e somar a olho é o que o dono faz
   pra conferir contra a planilha dele. */
.conta{ border-left-color: var(--primary); }
.conta[data-tone="alerta"]{ border-left-color: var(--danger); }
.conta[data-tone="bom"]{ border-left-color: var(--positive); }
.conta[data-tone="neutro"]{ border-left-color: var(--border-strong); }

.conta .report-lede__head{ max-width: 28ch; }
.conta__sub{
  margin: 12px 0 0; font-size: var(--fs-md); line-height: 1.55; color: var(--ink);
  max-width: 62ch;
}
.conta__cascata{
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 0 14px; align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.conta__linha{
  display: contents;
}
.conta__linha > span{
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-md); line-height: 1.4; color: var(--ink);
}
.conta__rotulo{ color: var(--muted); }
.conta__valor{ text-align: right; white-space: nowrap; font-family: var(--font-mono); font-size: var(--fs-sm); }
.conta__pct{
  text-align: right; white-space: nowrap;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  min-width: 5ch;
}
/* Os dois marcos: lucro operacional e resultado final. Pesam mais porque são
   respostas, e as linhas acima são o caminho até elas. */
.conta__linha--marco > span{
  font-weight: 600; font-size: var(--fs-md);
  border-bottom: 2px solid var(--border-strong);
  padding-top: 11px;
}
.conta__linha--marco .conta__rotulo{ color: var(--ink); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.06em; font-family: var(--font-mono); }
.conta__linha--marco[data-tone="bom"] .conta__valor{ color: var(--positive); }
.conta__linha--marco[data-tone="alerta"] .conta__valor{ color: var(--danger); }
/* O TOPO DA CASCATA, agora em três degraus: o bruto que entrou, o que sai
   antes de a conta começar (serviço e imposto) e a líquida — que é a base de
   tudo abaixo, e por isso é ela que leva a régua grossa. */
.conta__linha--bruto .conta__rotulo{ color: var(--ink); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.06em; font-family: var(--font-mono); }
/* As retenções não são despesa da casa: são dinheiro que passa por ela. Ficam
   em cinza, recuadas, para não disputar peso com as linhas que o dono decide. */
.conta__linha--antes .conta__rotulo{ padding-left: 12px; color: var(--muted); }
.conta__linha--antes .conta__valor{ color: var(--muted); }
.conta__linha--antes .conta__pct{ font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.conta__linha--base > span{ border-bottom: 2px solid var(--border-strong); }
.conta__linha--base .conta__rotulo{ color: var(--ink); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.06em; font-family: var(--font-mono); }
/* Linha em aberto NÃO some e NÃO se disfarça de zero: fica cinza e escrita.
   Some da tela, some da cabeça — e o dono nunca descobre que ela existe. */
.conta__linha--aberta .conta__valor{ color: var(--muted); }
.conta__aberta{ font-style: italic; font-size: var(--fs-sm); }

@media (max-width: 720px){
  .conta .report-lede__head{ max-width: none; }
  .conta__sub{ font-size: var(--fs-md); }
  /* O % sai no celular: três colunas de número espremem o rótulo até ele
     quebrar no meio da palavra, e o rótulo é o que faz a cascata ser lida. */
  .conta__cascata{ grid-template-columns: 1fr auto; }
  .conta__pct{ display: none; }
}

/* A gaveta das quatro linhas de baixo, no formulário do mês. */
.closes__fim{
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--paper);
}
.closes__fim-sum{
  cursor: pointer; padding: 11px 14px;
  display: flex; flex-direction: column; gap: 2px;
  list-style: none;
}
.closes__fim-sum::-webkit-details-marker{ display: none; }
.closes__fim-sum::before{
  content: '+'; float: right;
  font-family: var(--font-mono); color: var(--muted); font-size: var(--fs-lg); line-height: 1;
}
.closes__fim[open] .closes__fim-sum::before{ content: '−'; }
.closes__fim-sum:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.closes__fim-titulo{ font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
/* O resumo diz o que se ganha abrindo. Uma gaveta muda é um campo que
   ninguém encontra. */
.closes__fim-nota{ font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.closes__fields--fim{ padding: 0 14px 14px; }

/* ---- ANO CONTRA ANO ----
   Três cartões de variação, e a variação é a informação: ela vem grande, e o
   de/para embaixo em corpo pequeno. A direção não depende só de cor — cada
   número carrega o próprio sinal (+/−), porque "verde" e "vermelho" não
   sobrevivem a um daltônico nem a um print em preto e branco. E aqui a cor
   nem poderia decidir sozinha: gente subindo é bom, custo subindo não é. */
.anoano{ border-left-color: var(--primary); }
.anoano[data-tone="alerta"]{ border-left-color: var(--danger); }
.anoano[data-tone="atencao"]{ border-left-color: var(--accent); }
.anoano[data-tone="bom"]{ border-left-color: var(--positive); }
.anoano[data-tone="neutro"]{ border-left-color: var(--border-strong); }

.anoano .report-lede__head{ max-width: 30ch; }
.anoano__sub{
  margin: 12px 0 0; font-size: var(--fs-md); line-height: 1.55; color: var(--ink);
  max-width: 62ch;
}

.anoano__tres{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin: 18px 0 0;
}
[hidden].anoano__tres{ display: none !important; }
.anoano__card{
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--primary-04); border-radius: var(--r-sm);
}
[hidden].anoano__card{ display: none !important; }
.anoano__rot{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); line-height: 1.3;
}
/* Sem verde e sem vermelho, de propósito. Subir não é bom nem ruim aqui: no
   caso que este bloco existe pra pegar — faturamento e ticket em alta, gente
   em queda — pintar por direção mostraria dois verdes e um vermelho, que se
   lê como "dois a um a favor" debaixo de uma manchete avisando o contrário.
   O sinal (+/−) dá a direção; quem julga é a frase, que sabe a causa. */
.anoano__var{
  font-size: var(--fs-xl); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.anoano__de-para{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.anoano__linhas{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
}
.anoano__linha b{ font-weight: 600; }

@media (max-width: 720px){
  .anoano .report-lede__head{ max-width: none; }
  .anoano__sub{ font-size: var(--fs-md); }
  .anoano__tres{ grid-template-columns: 1fr; gap: 8px; }
  .anoano__card{ flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; }
  .anoano__de-para{ flex-basis: 100%; }
}

/* ---- A FICHA CONTRA A COZINHA ----
   Mesma gramática do caminho (é o bloco irmão, e ler os dois como peças
   diferentes faria o dono achar que são dois assuntos). O que muda é o par
   de números no meio: ali a comparação PRECISA ser visual, porque o ponto
   inteiro do bloco é a distância entre dois percentuais. */
.desvio{ border-left-color: var(--primary); }
.desvio[data-tone="alerta"]{ border-left-color: var(--danger); }
.desvio[data-tone="atencao"]{ border-left-color: var(--accent); }
.desvio[data-tone="bom"]{ border-left-color: var(--positive); }
.desvio[data-tone="neutro"]{ border-left-color: var(--border-strong); }

.desvio .report-lede__head{ max-width: 30ch; }
.desvio__sub{
  margin: 12px 0 0; font-size: var(--fs-md); line-height: 1.55; color: var(--ink);
  max-width: 60ch;
}

/* Os dois lados e o buraco. Colunas de largura igual pra os percentuais
   ficarem em linha vertical — é a comparação que o bloco existe pra fazer, e
   ela morre se os números não se alinharem. */
.desvio__par{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin: 18px 0 0;
}
/* `display:grid` ignora o [hidden] do HTML sozinho — e sem esta linha o par
   de percentuais sobrevive ao estado "faltando", que é justamente quando não
   existe conta nenhuma pra mostrar. O dono leria dois números de verdade sob
   um texto dizendo que falta dado. Mesma armadilha de .frentes__item. */
[hidden].desvio__par{ display: none !important; }
.desvio__lado{
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--primary-04);
  border-radius: var(--r-sm);
}
/* A terceira coluna é a resposta, não mais um dado: ganha a tinta do tom. */
.desvio__lado--gap{ background: transparent; border: 1px solid var(--border-strong); }
.desvio[data-tone="alerta"] .desvio__lado--gap{ border-color: var(--danger); }
.desvio[data-tone="atencao"] .desvio__lado--gap{ border-color: var(--accent); }
.desvio[data-tone="bom"] .desvio__lado--gap{ border-color: var(--positive); }

.desvio__rot{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); line-height: 1.3;
}
.desvio__val{
  font-size: var(--fs-xl); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.desvio[data-tone="alerta"] .desvio__lado--gap .desvio__val{ color: var(--danger); }
.desvio[data-tone="bom"] .desvio__lado--gap .desvio__val{ color: var(--positive); }
.desvio__val-sub{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.desvio__suspeitos{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
  font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
}
/* Numerada à mão: "nesta ordem" é a informação, e um marcador redondo diria
   o contrário — que tanto faz por onde começar. */
.desvio__suspeitos{ counter-reset: susp; }
.desvio__suspeito{ counter-increment: susp; position: relative; padding-left: 22px; }
.desvio__suspeito::before{
  content: counter(susp) '.'; position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted);
}

/* A cobertura é ressalva, não corpo: cinza e menor. Mas quando ela é FRACA
   ela deixa de ser rodapé — vira a coisa mais importante da tela, porque o
   número acima não sustenta o peso que aparenta ter. */
.desvio__cobertura{
  margin: 14px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
  max-width: 60ch;
}
.desvio__cobertura[data-fraca="1"]{
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 10px;
}

@media (max-width: 720px){
  .desvio .report-lede__head{ max-width: none; }
  .desvio__sub{ font-size: var(--fs-md); }
  /* Três colunas de percentual num celular dão quatro caracteres por coluna.
     Empilhado, cada lado vira uma linha legível — e a comparação continua de
     pé porque os rótulos ficam colados nos números. */
  .desvio__par{ grid-template-columns: 1fr; gap: 8px; }
  .desvio__lado{ flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
  .desvio__lado .desvio__rot{ flex: 0 1 auto; }
  .desvio__val{ font-size: var(--fs-lg); }
  .desvio__lado--gap{ flex-wrap: wrap; }
}

.summary-block{
  margin: 0 0 26px;
  /* Sem borda externa: os cards já são as caixas; uma moldura por cima
     empurraria o número pra dentro e roubaria respiro. */
  background: transparent;
  padding: 0;
}
/* hidden tem de vencer qualquer display — senão a abertura fica presa visível. */
.summary-block[hidden]{ display: none !important; }

/* Duas colunas: o terceiro card ("Faça isso primeiro") virou o andar FAÇA
   PRIMEIRO do #report-lede. O que sobrou são os dois números que a leitura
   acima usa como prova — oportunidade e ticket. */
.summary-block__grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  align-items: stretch;
}

.summary-card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 22px 22px 20px;
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0; min-height: 200px;
  position: relative;
}
/* Oportunidade: âmbar suave (mesma família do revenue-block), borda mais
   marcada — diagnóstico de perda. Não vermelho: oportunidade, não acusação. */
.summary-card--opp{
  background: var(--gold-paper);
  border-color: var(--gold-soft);
}

/* Verbo/diagnóstico curto, acima do número. Caixa baixa, peso normal — o
   peso visual é do número, não do verbo. Mono pequeno alinha com a hierarquia
   editorial do resto do app (selo, eyebrow). */
.summary-card__verb{
  font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  line-height: 1.3;
}
.summary-card--opp .summary-card__verb{ color: var(--gold-deep); }

/* Número herói. clamp() porque os 3 cards têm tamanhos de string diferentes
   (R$ 4.200/mês vs R$ 89 · R$ 105 vs uma lista) e o desktop precisa caber
   tudo numa linha enquanto o mobile não vira pavão. */
.summary-card__num{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  /* Bloco — quebra natural se passar; sem encolher pra escapar do design. */
  display: block;
  word-break: normal;
  overflow-wrap: anywhere;
}
/* Card âmbar: cor âmbar profundo no número, herda do revenue-block. */
.summary-card--opp .summary-card__num{ color: var(--gold-ink); }

/* Card ticket: dois valores ("seu" · "mercado"). Mesma altura, separador
   discreto. O "deles" um pouco mais leve pra hierarquia ler "comparação", não
   "dois números iguais". */
.summary-card__num-you,
.summary-card__num-them{ font-variant-numeric: tabular-nums; }
.summary-card__num-them{ color: var(--muted); font-weight: 500; }
.summary-card__num-sep{
  color: var(--muted); font-weight: 400; margin: 0 0.15em;
}

/* Sublabel (procedência / base). Cinza pequeno — só lê quem precisa. */
.summary-card__sub{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.45;
  margin-top: auto;
  font-variant-numeric: tabular-nums;
}
.summary-card--opp .summary-card__sub{ color: var(--gold-deep); }
/* O nº de pessoas/dia que sustenta o número, e o caminho até o campo que o
   muda. Sublinhado porque é ação, não dado. */
.summary-card__paxlink{
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  border-bottom: 1px solid currentColor;
}
.summary-card__paxlink:hover{ color: var(--ink); }
.summary-card__paxlink:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* Card 3 — lista de até 2 ações com selo de R$/mês. Sem botões: a ação é o
   título do bullet, o R$ ancora. */
.summary-card__actions{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.summary-action-item{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-md); line-height: 1.35; color: var(--ink);
}
.summary-action-text{
  font-family: var(--font-display); font-weight: 500;
  flex: 1; min-width: 0;
  /* Permite quebrar nomes longos sem empurrar a tag pra outra linha. */
  overflow-wrap: break-word;
}
.summary-action-tag{
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border-strong, var(--border));
  background: var(--paper);
  flex-shrink: 0;
}
.summary-action-tag--money{
  color: var(--gold-ink); border-color: var(--gold-soft); background: var(--gold-paper);
}
.summary-action-tag[data-tone="alto"]{ color: var(--primary); border-color: var(--primary-60); }

/* === Estado INVITE — sem dado real, sem número gigante.
   O card encolhe visualmente (padding interno reduzido, sem altura mínima),
   o verbo vira título do convite e a sublabel some — a única mensagem é o
   convite. Não finge "—". === */
.summary-card[data-state="invite"]{
  min-height: 0;
  background: var(--paper);
  border-style: dashed;
}
.summary-card[data-state="invite"] .summary-card__num{
  display: none;
}
.summary-card[data-state="invite"] .summary-card__verb{
  font-family: var(--font-display);
  font-size: var(--fs-lg); letter-spacing: 0;
  text-transform: none; color: var(--ink);
  font-weight: 600;
}
.summary-card--opp[data-state="invite"]{
  background: var(--gold-paper); border-color: #D6BE92;
}
.summary-card--opp[data-state="invite"] .summary-card__verb{ color: var(--gold-ink); }
.summary-card__invite{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.45;
  margin-top: 4px;
}

/* === Mobile === Empilha em 1 coluna, número herói encolhe sem virar
   confuso. min-height some pra não criar buracos. */
@media (max-width: 720px){
  .summary-block__grid{ grid-template-columns: 1fr; gap: 12px; }
  .summary-card{ min-height: 0; padding: 18px 18px 16px; gap: 10px; }
  .summary-card__num{ font-size: clamp(1.7rem, 7vw, 2.4rem); }
}

/* ===================================================================
   F1 — Bloco de portfólio: SKUs e ticket médio vs. mercado
   =================================================================== */
.portfolio-block{
  margin: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 18px 22px 14px;
}
.portfolio-block[hidden]{ display: none !important; }

.portfolio-block__label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 14px;
}
.portfolio-block__cards{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.portfolio-block__card{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.portfolio-block__card-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.portfolio-block__card-row{
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.portfolio-block__owner{
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 600;
  color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.portfolio-block__vs{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
}
.portfolio-block__market{
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500;
  color: var(--primary-60); font-variant-numeric: tabular-nums;
}
.portfolio-block__market-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted);
  letter-spacing: 0.02em;
}
.portfolio-block__foot{
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--muted); font-style: italic;
}

@media (max-width: 520px){
  .portfolio-block__cards{ grid-template-columns: 1fr; }
}

/* ===================================================================
   Bloco de impacto financeiro estimado
   Tom âmbar-neutro: oportunidade, não promessa.
   =================================================================== */
.revenue-block{
  margin: 0 0 24px;
  border: 1px solid var(--gold-soft);
  border-radius: var(--r-md);
  background: var(--gold-paper);
  padding: 22px 24px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 16px 24px;
}
.revenue-block[hidden]{ display: none !important; }

.revenue-block__main{
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; gap: 6px;
}
.revenue-block__label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-deep);
}
.revenue-block__figure{
  display: flex; align-items: baseline; gap: 6px;
}
.revenue-block__value{
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 600;
  color: var(--gold-ink); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  transition: color .2s var(--ease);
}
.revenue-block__period{
  font-family: var(--font-mono); font-size: var(--fs-md); color: var(--gold-deep);
}
.revenue-block__sub{
  font-size: var(--fs-sm); color: var(--gold-deep); line-height: 1.45;
}
/* A ressalva do mês médio. Fica visualmente ABAIXO da procedência e mais
   discreta que ela: é enquadramento do número, não fonte dele. O filete à
   esquerda separa "de onde vem o R$" de "como ler o R$". */
.revenue-block__season{
  margin-top: 6px; padding-left: 8px;
  border-left: 2px solid rgba(154, 116, 48, 0.28);
  font-size: var(--fs-sm); color: var(--gold-deep); line-height: 1.4; opacity: 0.92;
}

.revenue-block__controls{
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end; justify-content: flex-start;
}
.revenue-covers__title{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-deep); display: block; text-align: right;
}
.revenue-covers__hint{
  font-size: var(--fs-xs); color: #B89540; display: block; text-align: right; margin-bottom: 4px;
}
.revenue-covers__input{
  width: 90px;
  background: #fff; border: 1px solid var(--gold-soft);
  border-radius: var(--r-sm); padding: 7px 10px;
  font-family: var(--font-mono); font-size: var(--fs-md); color: var(--gold-ink);
  text-align: right;
  transition: border-color .2s var(--ease);
  -moz-appearance: textfield;
}
.revenue-covers__input::-webkit-inner-spin-button,
.revenue-covers__input::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
.revenue-covers__input:focus{ outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 3px var(--gold-12); }

.revenue-block__breakdown{
  grid-column: 1 / -1; grid-row: 2;
  border-top: 1px solid #E8D9A0;
  padding-top: 14px;
}
.revenue-block__breakdown[hidden]{ display: none; }
.revenue-breakdown__head{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px;
}
.revenue-breakdown__list{
  display: flex; flex-direction: column; gap: 6px;
}
.revenue-breakdown__item{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--fs-sm);
}
.revenue-breakdown__namewrap{
  display: flex; align-items: baseline; flex: 1; min-width: 0;
}
.revenue-breakdown__name{
  color: var(--gold-ink); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.revenue-breakdown__delta{
  font-family: var(--font-mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  color: var(--gold-deep); white-space: nowrap; flex: none; text-align: right;
}

/* Procedência do número por item: dado do dono vs. estimativa de base.
   Mesmo tom âmbar do bloco; a real é sólida, a estimada é apagada (honestidade). */
.revenue-breakdown__src{
  display: inline-block; flex: none; font-family: var(--font-mono);
  font-size: var(--fs-2xs); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px; vertical-align: middle;
  white-space: nowrap; margin-left: 6px;
}
.revenue-breakdown__src--real{
  color: #6B4E0E; background: rgba(154,116,48,0.16);
  border: 1px solid var(--gold-30);
}
.revenue-breakdown__src--est{
  color: var(--gold-deep); background: transparent;
  border: 1px dashed var(--gold-45);
}

@media (max-width: 480px){
  /* Nome + pill ocupam a linha toda; o delta cai embaixo, alinhado à esquerda.
     Sem isso o flex-wrap colapsa o nome a zero ao dividir espaço com o delta. */
  .revenue-breakdown__item{ flex-wrap: wrap; gap: 2px 8px; }
  .revenue-breakdown__namewrap{ flex-basis: 100%; }
  .revenue-breakdown__delta{ white-space: normal; text-align: left; flex: 1 0 100%; }
}

.revenue-block__disclaimer{
  grid-column: 1 / -1; grid-row: 3;
  font-size: var(--fs-xs); color: #B89540; font-style: italic; line-height: 1.45;
  border-top: 1px solid #E8D9A0; padding-top: 10px; margin-top: 2px;
}

@media (max-width: 520px){
  .revenue-block{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
  }
  .revenue-block__controls{
    grid-column: 1; grid-row: 2;
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px;
  }
  .revenue-covers__title{ text-align: left; }
  .revenue-covers__hint{ text-align: left; }
  .revenue-block__breakdown{ grid-row: 3; }
  .revenue-block__disclaimer{ grid-row: 4; }
}

@media (max-width: 720px){
  .app-main{ padding: 32px 18px 64px; }
  .intake-example__grid{ grid-template-columns: 1fr; }
  .report__foot{ grid-template-columns: 1fr; gap: 6px; }
  .rangechart{ padding: 20px 18px 24px; }
  .rc-row{ grid-template-columns: 1fr; gap: 8px; }
  .rc-track{ margin: 18px 10px 8px; }
  .channel{ flex-direction: column; align-items: stretch; gap: 8px; }
  .seg{ display: flex; }
  .seg__opt{ flex: 1 1 50%; text-align: center; padding: 10px 0; }
  .channel__hint{ flex: none; }
  .recorte__grid{ grid-template-columns: 1fr; }
}

/* ===================================================================
   F2 — Ficha técnica / MC · Botão "Ver margem"
   =================================================================== */
.margin-btn{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--primary-60);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 3px 9px; margin-top: 6px;
  background: var(--paper);
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
  cursor: pointer;
}
.margin-btn:hover{ border-color: var(--primary); color: var(--primary); background: var(--primary-04); }
.margin-btn.has-data{ border-color: var(--positive); color: var(--positive); background: var(--positive-bg); }
.margin-btn__icon{ flex: none; opacity: 0.7; }
.margin-btn.has-data .margin-btn__icon{ opacity: 1; }

/* ===================================================================
   F4 — Descrição que vende por IA
   Botão "Gerar descrição": irmão do "Ver margem" (mesma casca), distinto
   só pelo accent dourado + faísca. A frase gerada é voz de cardápio:
   Fraunces itálico, tinta quente, terceira camada da célula do item —
   empurra a altura da linha, nunca invade as colunas numéricas.
   =================================================================== */
.desc-btn{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--primary-60);
  border: 1px solid var(--accent); border-radius: var(--r-sm);
  padding: 3px 9px; margin-top: 6px;
  background: var(--paper);
  transition: border-color .15s var(--ease), color .15s var(--ease), background .15s var(--ease);
  cursor: pointer;
}
.desc-btn:hover{ color: var(--ink); background: var(--accent-soft); }
.desc-btn__icon{ flex: none; color: var(--accent); }

/* Bloco da frase — só ocupa espaço quando preenchido ou em ação. Em repouso
   (sem frase salva) nasce vazio e colapsado: zero ruído na célula. */
.sell-desc{ display: none; }
.sell-desc--filled,
.sell-desc--loading,
.sell-desc--error{
  display: block;
  margin-top: 7px;
  max-width: 52ch;
  min-width: 0;
}

.sell-desc__text{
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--gold-dust);             /* marrom-tinta: lê como cardápio, não UI */
  padding-left: 9px;
  border-left: 2px solid var(--accent-soft);
  word-break: break-word;
  animation: sell-desc-in .18s var(--ease);
}
@keyframes sell-desc-in{ from{ opacity: 0; transform: translateY(4px); } to{ opacity: 1; transform: none; } }

.sell-desc__actions{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px; padding-left: 9px;
}
.sell-desc__copy, .sell-desc__redo{
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-dust); opacity: 0.55;
  background: none; border: none; padding: 2px 0; cursor: pointer;
  transition: opacity .15s var(--ease), color .15s var(--ease);
}
.sell-desc__copy:hover, .sell-desc__redo:hover{ opacity: 1; }
.sell-desc__copy.is-copied{ opacity: 1; color: var(--positive); }

.sell-desc__loading{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent);
}
.sell-desc__loading .desc-btn__icon{ animation: sell-desc-pulse 1s var(--ease) infinite; }
@keyframes sell-desc-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.35; } }

.sell-desc__retry{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.03em;
  color: var(--danger); background: none; border: none; padding: 2px 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* ===================================================================
   F3-prep — Volume de vendas por item
   Coluna "Vendas/sem" no desktop; no mobile o input migra para dentro
   da célula do item (a coluna seria descartada pelo grid no celular).
   =================================================================== */

/* Hint que conecta o dado à matriz de engenharia (F3) */
.sales-hint{
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 16px; margin: 0 0 -1px;
  background: var(--primary-04);
  border: 1px solid var(--border); border-bottom: none;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--primary-70, var(--primary-60));
}
.sales-hint__ico{ flex: none; margin-top: 1px; color: var(--primary); opacity: .8; }
.sales-hint b{ font-weight: 600; color: var(--ink); }
/* hidden tem de vencer o display:flex — senão a dica de progresso fica presa. */
.sales-hint[hidden]{ display: none !important; }

/* Célula-coluna (desktop). Encostada à direita como as demais numéricas. */
.cell--sales{ justify-content: flex-end; }
.th--sales{ text-align: right; }

/* Input de vendas — fantasma em repouso, ganha corpo ao focar/preencher.
   Segue o tom discreto do margin-btn: convida sem gritar. */
.sales-input{
  width: 100%; max-width: 78px;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; text-align: right;
  color: var(--ink);
  padding: 5px 8px;
  background: transparent;
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: border-color .15s var(--ease), background .15s var(--ease);
  -moz-appearance: textfield;
}
.sales-input::placeholder{ color: var(--primary-40, var(--muted)); }
.sales-input:hover{ border-color: var(--border); }
.sales-input:focus{
  outline: none;
  border-color: var(--primary);
  background: var(--paper);
}
.sales-input.has-value{
  border-color: var(--border);
  background: var(--paper);
  font-weight: 500;
}

/* Linha de controles na célula do item — agrupa "Ver margem" + vendas.
   Os dois inputs da F3 (custo via modal, volume aqui) ficam visualmente juntos. */
.cell--item__controls{
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.cell--item__sales{ display: none; align-items: center; gap: 6px; }
.sales-mobile-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60); white-space: nowrap;
}
.sales-input--mobile{ max-width: 70px; }
/* No desktop o input-coluna é o canônico; o mobile fica oculto até o breakpoint. */
.sales-input--mobile, .cell--item__sales{ display: none; }

/* Preview CSV com coluna de vendas (3ª coluna só quando o arquivo a traz) */
.csv-preview__table--sales .csvp-row{ grid-template-columns: 1fr auto auto; }
.csv-preview__table--sales .csvp-row--more{ grid-template-columns: 1fr; }
.csvp-sales{
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  text-align: right; min-width: 56px; color: var(--ink);
}
.csvp-row--head .csvp-sales{ color: var(--primary-60); }

/* Célula "a definir" no preview do CSV — item sem preço na planilha é uma
   decisão pendente do dono, não um erro. Vocabulário do dono, não do agente. */
.csvp-todefine{
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--primary-70, #6b6ee0); text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ===================================================================
   Modal de ficha técnica
   =================================================================== */
.modal-backdrop{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,16,20,0.48);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 16px;
  animation: backdrop-in .18s var(--ease);
}
[hidden].modal-backdrop{ display: none !important; }
@keyframes backdrop-in{ from{ opacity:0; } to{ opacity:1; } }

.modal{
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  width: 100%; max-width: 480px;
  animation: modal-in .2s var(--ease);
  max-height: 90vh; overflow-y: auto;
}
@keyframes modal-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.modal__head{
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--border);
  gap: 12px;
}
.modal__title{
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500;
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.3;
}
.modal__subtitle{
  font-size: var(--fs-sm); color: var(--muted); margin-top: 3px;
}
.modal__close{
  flex: none; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--muted);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.modal__close:hover{ background: var(--primary-04); color: var(--ink); }

.modal__body{ padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }

/* Campos de input */
.mc-field{ display: flex; flex-direction: column; gap: 6px; }
.mc-field__label{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60);
}
.mc-field__input-wrap{ position: relative; }
.mc-field__prefix{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted);
  pointer-events: none;
}
.mc-field__suffix{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted);
  pointer-events: none;
}
.mc-input{
  width: 100%;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 10px 44px 10px 36px;
  font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--ink);
  transition: border-color .2s var(--ease);
  -moz-appearance: textfield;
}
.mc-input::-webkit-inner-spin-button,
.mc-input::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
.mc-input:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-04); }
.mc-input.is-prefixless{ padding-left: 14px; }
.mc-field__hint{ font-size: var(--fs-xs); color: var(--muted); }

/* Cabeçalho do campo de custo: label + botão "Estimar com IA" alinhados. */
.mc-field__labelrow{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Elementos com display custom precisam ceder ao atributo hidden — senão o
   display vence e o botão/chip vazam visíveis (ex.: sem chave de IA). */
[hidden].mc-estimate-btn,
[hidden].mc-estimate-chip,
[hidden].costgrid__ai,
[hidden].costgrid__ai-progress{ display: none !important; }
.mc-estimate-btn{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
  padding: 4px 9px; border-radius: var(--r-sm);
  background: var(--primary-04); color: var(--primary);
  border: 1px solid var(--border); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.mc-estimate-btn:hover:not(:disabled){ background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.mc-estimate-btn:disabled{ opacity: .6; cursor: default; }
.mc-estimate-btn svg{ flex: none; }

/* Chip de estimativa sob o campo: âmbar = "é chute, confira"; neutro quando
   ajustado pelo dono; discreto vermelho em falha. */
.mc-estimate-chip{
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); line-height: 1.3;
  padding: 6px 9px; border-radius: var(--r-sm); margin-top: 2px;
}
.mc-estimate-chip svg{ flex: none; }
.mc-estimate-chip[data-kind="ai"]{ background: var(--gold-10); color: var(--gold-ink); }
.mc-estimate-chip[data-kind="edited"]{ background: var(--primary-04); color: var(--primary-60); }
.mc-estimate-chip[data-kind="error"]{ background: var(--danger-bg); color: var(--danger); }

/* F3-ficha — toggle "Detalhar por insumo". Discreto, sem competir com o
   botão de IA na mesma região. Aparece logo abaixo do hint, alinhado à
   esquerda. */
.mc-ficha-toggle{
  align-self: flex-start;
  background: none; border: none; padding: 0; margin-top: 2px;
  font: inherit; font-size: var(--fs-sm); color: var(--primary);
  text-decoration: underline; text-decoration-color: var(--border);
  text-underline-offset: 2px; cursor: pointer;
  transition: color .15s var(--ease), text-decoration-color .15s var(--ease);
}
.mc-ficha-toggle:hover{ color: var(--ink); text-decoration-color: var(--primary); }

/* Quando há ficha ativa, o campo de custo vira read-only ancorado. Aviso
   sob o input pra leitura ficar honesta: "= soma de N insumos". */
.mc-input[readonly]{
  background: var(--surface); color: var(--primary-60); cursor: default;
}
.mc-cost-derived{
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--primary-60); margin-top: 4px;
}

/* F3-ficha — bloco da ficha. Mora dentro do modal__body como um cartão
   próprio, fundo claro, para se distinguir do campo de custo único.
   Elementos com display custom precisam ceder ao atributo hidden — senão o
   display vence e o bloco/total vazam visíveis (mesma armadilha do botão de
   IA, já tratada para .mc-estimate-btn acima). */
[hidden].mc-ficha,
[hidden].mc-ficha__total,
[hidden].ficha-pill{ display: none !important; }
.mc-ficha{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: -6px; /* aproxima do toggle, sem grudar */
}
.mc-ficha__head{ display: flex; flex-direction: column; gap: 4px; }
.mc-ficha__head-row{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.mc-ficha__title{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60);
}
.mc-ficha__hint{ font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }

/* "Sugerir ficha por IA" — botão discreto no cabeçalho da ficha. Mesmo tom
   do "Estimar com IA" do custo único. Cede ao atributo hidden. */
[hidden].mc-ficha-ai-btn,
[hidden].mc-ficha-ai-chip{ display: none !important; }
.mc-ficha-ai-btn{
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.03em;
  text-transform: uppercase; white-space: nowrap;
  padding: 5px 9px; border-radius: var(--r-sm);
  background: #fff; color: var(--primary);
  border: 1px solid var(--border); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.mc-ficha-ai-btn:hover{ background: var(--primary-04); border-color: var(--primary); }
.mc-ficha-ai-btn:disabled{ opacity: .6; cursor: default; }
.mc-ficha-ai-btn svg{ flex: none; }
/* Chip de estado da sugestão: estimativa a revisar (ai) ou erro. */
.mc-ficha-ai-chip{
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); line-height: 1.3;
  padding: 6px 8px; border-radius: var(--r-sm);
}
.mc-ficha-ai-chip[data-kind="ai"]{
  background: var(--primary-04); color: var(--primary-60); border: 1px solid var(--border);
}
.mc-ficha-ai-chip[data-kind="error"]{
  background: var(--danger-bg); color: var(--danger);
}
.mc-ficha-ai-chip svg{ flex: none; }

.mc-ficha__rows{ display: flex; flex-direction: column; gap: 8px; }

/* Linha: grid de 5 colunas (nome, qtd, unidade, R$/un, % perda) + lixeira.
   No mobile vira layout em áreas, mantendo legibilidade. */
.mc-ficha__row{
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 62px 58px 84px 62px 28px;
  gap: 6px; align-items: stretch;
}
.mc-ficha__row input,
.mc-ficha__row select{
  width: 100%; min-width: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 7px 8px;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink);
  -moz-appearance: textfield;
}
.mc-ficha__row input[name="name"]{ font-family: var(--font-sans); }
.mc-ficha__row input::-webkit-inner-spin-button,
.mc-ficha__row input::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
.mc-ficha__row input:focus,
.mc-ficha__row select:focus{ outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-04); }

.mc-ficha__row-total{
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--primary-60); text-align: right;
  margin-top: -2px;
}
/* Campo "% perda": placeholder mais curto, mesma família dos numéricos. */
.mc-ficha__row-loss-input::placeholder{ font-size: var(--fs-xs); }
/* Leitura honesta da perda: "300g no prato · 350g comprado · perda 15%".
   Discreta, ocupa a linha inteira sob os campos. */
.mc-ficha__row-loss{
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--muted); text-align: left;
  margin-top: -2px;
}
.mc-ficha__row-remove{
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.mc-ficha__row-remove:hover{ color: var(--danger); border-color: var(--danger-bg); background: var(--danger-bg); }

.mc-ficha__footer{
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding-top: 6px; border-top: 1px dashed var(--border);
}
.mc-ficha__add{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px; border-radius: var(--r-sm);
  background: #fff; color: var(--primary);
  border: 1px solid var(--border); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.mc-ficha__add:hover{ background: var(--primary-04); border-color: var(--primary); }
.mc-ficha__add:disabled{ opacity: .5; cursor: default; }

.mc-ficha__total{
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
}
.mc-ficha__total-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60);
}
.mc-ficha__total-val{
  font-family: var(--font-mono); font-size: var(--fs-lg); color: var(--ink);
}

/* Indicador "ficha" na tabela do resultado — discreto, ao lado do botão
   "Ver margem". Marca de transparência: este custo vem da ficha técnica,
   não de chute. */
.ficha-pill{
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
  padding: 3px 7px; border-radius: var(--r-sm);
  background: var(--primary-04); color: var(--primary-60);
  border: 1px solid var(--border);
}
.ficha-pill svg{ flex: none; }

@media (max-width: 520px){
  .mc-ficha__row{
    grid-template-columns: minmax(0, 1fr) 64px 28px;
    grid-template-areas:
      "name   name   remove"
      "qty    unit   remove"
      "cost   loss   remove";
  }
  .mc-ficha__row input[name="name"]{ grid-area: name; }
  .mc-ficha__row input[name="qty"]{ grid-area: qty; }
  .mc-ficha__row select[name="unit"]{ grid-area: unit; }
  .mc-ficha__row input[name="unitCost"]{ grid-area: cost; }
  .mc-ficha__row input[name="lossPct"]{ grid-area: loss; }
  .mc-ficha__row-remove{ grid-area: remove; }
  .mc-ficha__head-row{ flex-wrap: wrap; }
}

/* Resultado calculado */
.mc-result{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.mc-result--empty{ display: none; }
.mc-result__row{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.mc-result__label{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.mc-result__value{
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.mc-result__divider{ border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* Semáforo de MC */
.mc-semaphore{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.mc-semaphore__dot{
  width: 10px; height: 10px; border-radius: 50%; flex: none;
}
.mc-semaphore__text{
  font-size: var(--fs-sm); font-weight: 500;
  line-height: 1.3;
}
.mc-semaphore__sub{
  font-size: var(--fs-xs); color: var(--muted); margin-top: 1px;
  display: block;
}

.mc-semaphore[data-tone="green"]{
  background: var(--positive-bg); border-color: var(--positive-25);
}
.mc-semaphore[data-tone="green"] .mc-semaphore__dot{ background: var(--positive); }
.mc-semaphore[data-tone="green"] .mc-semaphore__text{ color: var(--positive); }

.mc-semaphore[data-tone="yellow"]{
  background: var(--gold-10); border-color: var(--gold-30);
}
.mc-semaphore[data-tone="yellow"] .mc-semaphore__dot{ background: var(--gold-deep); }
.mc-semaphore[data-tone="yellow"] .mc-semaphore__text{ color: var(--gold-ink); }

.mc-semaphore[data-tone="red"]{
  background: var(--danger-bg); border-color: var(--danger-25);
}
.mc-semaphore[data-tone="red"] .mc-semaphore__dot{ background: var(--danger); }
.mc-semaphore[data-tone="red"] .mc-semaphore__text{ color: var(--danger); }

.mc-semaphore[data-tone="none"]{
  background: var(--primary-04); border-color: var(--border);
}
.mc-semaphore[data-tone="none"] .mc-semaphore__dot{ background: var(--border-strong); }
.mc-semaphore[data-tone="none"] .mc-semaphore__text{ color: var(--muted); }

/* Margem de segurança vs. meta de margem (F3). Bloco abaixo do semáforo no
   modal de MC. [hidden] vence o display:flex — regra dura: nasce fechado. */
.mc-safety{
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 10px; padding: 11px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--primary-04);
}
.mc-safety[hidden]{ display: none !important; }
.mc-safety__head{
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--muted);
}
.mc-safety__body{ font-size: var(--fs-sm); line-height: 1.4; color: var(--ink); }
.mc-safety__body strong{ font-weight: 600; }
.mc-safety[data-tone="green"]{ background: var(--positive-bg); border-color: var(--positive-25); }
.mc-safety[data-tone="green"] .mc-safety__head{ color: var(--positive); }
.mc-safety[data-tone="red"]{ background: var(--danger-bg); border-color: var(--danger-25); }
.mc-safety[data-tone="red"] .mc-safety__head{ color: var(--danger); }

/* ===================================================================
   ATÉ ONDE DÁ PRA BAIXAR O PREÇO — a escada de piso do prato.
   Três degraus ordenados de cima pra baixo pelo valor, com o preço de
   hoje intercalado no lugar onde ele cai. A leitura é vertical e
   literal: o que está ACIMA da linha "você cobra hoje" é o que aquele
   preço ainda não paga.
   =================================================================== */
.mc-piso{
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px; padding: 12px 13px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--primary-04);
}
.mc-piso[hidden]{ display: none !important; }
.mc-piso__head{
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--muted);
}
.mc-piso[data-tone="green"]{ background: var(--positive-bg); border-color: var(--positive-25); }
.mc-piso[data-tone="green"] .mc-piso__head{ color: var(--positive); }
.mc-piso[data-tone="yellow"]{ background: var(--gold-10); border-color: var(--gold-30); }
.mc-piso[data-tone="yellow"] .mc-piso__head{ color: var(--gold-ink); }
.mc-piso[data-tone="red"]{ background: var(--danger-bg); border-color: var(--danger-25); }
.mc-piso[data-tone="red"] .mc-piso__head{ color: var(--danger); }

.mc-piso__ladder{ display: flex; flex-direction: column; }
.mc-piso__note{
  font-size: var(--fs-xs); line-height: 1.4; color: var(--muted);
  padding-top: 2px;
}
.mc-piso__note b{ color: var(--ink); font-weight: 600; }

/* Um degrau. A marca da esquerda é o fio da escada: cada linha desenha
   seu pedaço do fio, e os degraus emendam num traço contínuo. */
.piso-step{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}
.piso-step:last-child{ border-bottom: none; }
.piso-step__mark{
  flex: none; width: 9px; height: 9px; margin-top: 4px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: var(--paper);
}
.piso-step__body{ display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.piso-step__label{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.piso-step__explica{ font-size: var(--fs-xs); line-height: 1.35; color: var(--muted); }
.piso-step__val{
  flex: none; font-family: var(--font-mono); font-size: var(--fs-sm);
  font-weight: 600; color: var(--ink); white-space: nowrap; padding-top: 1px;
}

/* Degrau que o preço de hoje já passou: o fio fica cheio e verde. */
.piso-step--ok .piso-step__mark{ background: var(--positive); border-color: var(--positive); }
/* Degrau que ele ainda não alcança: fio vazado em vermelho, e o valor
   ganha peso — é o número que o dono precisa mirar. */
.piso-step--sob .piso-step__mark{ border-color: var(--danger); }
.piso-step--sob .piso-step__val{ color: var(--danger); }
/* Degrau que não dá pra calcular: nunca some, vira o pedido do dado.
   Fio tracejado, sem cor de julgamento — não é reprovação, é lacuna. */
.piso-step--falta{ opacity: 0.85; }
.piso-step--falta .piso-step__mark{ border-style: dashed; border-color: var(--border-strong); }
.piso-step__ask{
  flex: none; max-width: 58%; text-align: right;
  font-size: var(--fs-xs); line-height: 1.35; color: var(--muted);
}
.piso-step__ask b{ color: var(--ink); font-weight: 600; }

/* A linha do preço de hoje: é a régua da leitura, então destaca. */
.piso-step--hoje{
  margin: 2px 0; padding: 8px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--paper);
}
.piso-step--hoje .piso-step__label{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em; text-transform: uppercase; }
.piso-step--hoje .piso-step__val{ font-size: var(--fs-md); }
.piso-step--hoje[data-tone="green"]{ border-color: rgba(47,107,79,0.45); }
.piso-step--hoje[data-tone="green"] .piso-step__mark{ background: var(--positive); border-color: var(--positive); }
.piso-step--hoje[data-tone="green"] .piso-step__val{ color: var(--positive); }
.piso-step--hoje[data-tone="yellow"]{ border-color: var(--gold-45); }
.piso-step--hoje[data-tone="yellow"] .piso-step__mark{ background: var(--gold-deep); border-color: var(--gold-deep); }
.piso-step--hoje[data-tone="yellow"] .piso-step__val{ color: var(--gold-ink); }
.piso-step--hoje[data-tone="red"]{ border-color: rgba(162,59,44,0.45); }
.piso-step--hoje[data-tone="red"] .piso-step__mark{ background: var(--danger); border-color: var(--danger); }
.piso-step--hoje[data-tone="red"] .piso-step__val{ color: var(--danger); }

/* ===================================================================
   F2 — Resumo de MC no rodapé do resultado
   =================================================================== */
.mc-summary{
  margin-top: 20px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
}
[hidden].mc-summary{ display: none !important; }
.mc-summary__head{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 12px;
}
.mc-summary__grid{
  /* Duas colunas desde que a MC média saiu daqui (ela vive no painel
     financeiro, ponderada pelo volume). Sobraram os dois extremos. */
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
}
.mc-summary__card{
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.mc-summary__card--alert .mc-summary__val{ color: var(--danger); }
.mc-summary__card--best .mc-summary__val{ color: var(--positive); }
.mc-summary__card-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.mc-summary__val{
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 500;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.mc-summary__item-name{
  font-size: var(--fs-xs); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-summary__note{
  font-size: var(--fs-xs); color: var(--muted); font-style: italic;
  margin-top: 10px;
}

/* ===================================================================
   Grade de custo em lote (F2) — entrada rápida de custo de todos os
   itens. Irmã visual do resumo de MC: mesmo container, mesmos tokens.
   =================================================================== */
.costgrid{
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  overflow: hidden;
}
[hidden].costgrid{ display: none !important; }

.costgrid__head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.costgrid__heading{ min-width: 0; flex: 1 1 280px; }
.costgrid__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 7px;
}
.costgrid__lede{
  font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); margin: 0;
}
.costgrid__lede b{ color: var(--ink); font-weight: 600; }

/* Atalho de estimativa por % do preço */
.costgrid__estimate{ flex: 0 0 auto; min-width: 0; }
.costgrid__estimate-label{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.costgrid__estimate-controls{ display: flex; align-items: center; gap: 8px; position: relative; }

/* Caminho recomendado: estimar tudo por IA. */
.costgrid__ai{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
  padding: 8px 13px; border-radius: var(--r-sm);
  background: var(--primary); color: #fff;
  border: 1px solid var(--primary); cursor: pointer;
  transition: opacity .15s var(--ease), filter .15s var(--ease);
}
.costgrid__ai:hover:not(:disabled){ filter: brightness(1.08); }
.costgrid__ai:disabled{ opacity: .6; cursor: default; }
.costgrid__ai svg{ flex: none; }

/* Atalho rápido por % do preço: disclosure custom (sem marcador nativo). */
.costgrid__pct{ position: relative; }
.costgrid__pct-summary{
  list-style: none; cursor: pointer; user-select: none;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
  padding: 8px 13px; border-radius: var(--r-sm);
  background: var(--primary-04); color: var(--primary-60);
  border: 1px solid var(--border);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.costgrid__pct-summary::-webkit-details-marker{ display: none; }
.costgrid__pct-summary::after{ content: ' ▾'; opacity: .6; }
.costgrid__pct[open] .costgrid__pct-summary{ color: var(--ink); border-color: var(--primary); }
.costgrid__pct:hover .costgrid__pct-summary{ color: var(--ink); }
.costgrid__pct-pop{
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 12px; min-width: 230px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
}
.costgrid__pct-help{ font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
.costgrid__pct-row{ display: flex; align-items: center; gap: 8px; }

/* Progresso/resumo do lote por IA. */
.costgrid__ai-progress{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; font-size: var(--fs-sm); color: var(--ink);
}
.costgrid__ai-bar{
  display: inline-block; width: 120px; height: 5px; border-radius: 3px;
  background: var(--primary-04); overflow: hidden; flex: none;
}
.costgrid__ai-bar > span{ display: block; height: 100%; background: var(--primary); transition: width .2s var(--ease); }

.costgrid__pct-field{
  display: inline-flex; align-items: center;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); padding: 0 9px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.costgrid__pct-field:focus-within{ border-color: var(--primary); background: var(--paper); }
.costgrid__pct-input{
  width: 42px; border: none; background: transparent; outline: none;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--ink); padding: 7px 0;
}
.costgrid__pct-input--err{ color: var(--danger); }
.costgrid__pct-suffix{
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); margin-left: 2px;
}
.costgrid__apply{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
  padding: 8px 13px; border-radius: var(--r-sm);
  background: var(--primary-04); color: var(--primary);
  border: 1px solid var(--border); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.costgrid__apply:hover{ background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

/* Hint de progresso: encostado entre o head e a tabela. Sempre visível. */
.costgrid__progress{ margin: 0; border-left: none; border-right: none; border-top: none; }

/* Tabela da grade */
.costgrid__table{ width: 100%; }
/* Seis colunas desde que o preço mínimo entrou. O gap caiu de 12 pra 10 e a
   coluna do nome continua sendo a elástica (1fr) — é ela que absorve a largura
   nova, porque nome de prato tem ellipsis e número não. */
.costgrid__thead{
  display: grid; grid-template-columns: 1fr 84px 104px 136px 116px 100px;
  align-items: center; gap: 10px;
  padding: 9px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
}
.costgrid__th{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60);
}
.costgrid__th--price, .costgrid__th--cost{ text-align: right; }
.costgrid__th--mc{ text-align: left; }

.costgrid__row{
  display: grid; grid-template-columns: 1fr 84px 104px 136px 116px 100px;
  align-items: center; gap: 10px;
  padding: 8px 20px;
  border-bottom: 1px solid var(--border);
}
.costgrid__row:last-child{ border-bottom: none; }
.costgrid__row:nth-child(even){ background: var(--primary-04); }

.costgrid__cell--item{ display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Toggle "é bebida" por linha: custom, dentro da célula do nome (não cria coluna). */
.drink-toggle{
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted);
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.drink-toggle:hover{ border-color: var(--primary-30, rgba(47,107,79,0.3)); color: var(--ink); }
.drink-toggle.is-on{
  background: var(--positive-bg); border-color: rgba(47,107,79,0.3); color: var(--positive);
}
/* Auto-detectado e ainda não tocado: visível mas sinalizado como editável. */
.drink-toggle.is-auto{ border-style: dashed; }
.drink-toggle:focus-visible{ outline: 2px solid var(--positive); outline-offset: 1px; }
.costgrid__name{
  font-size: var(--fs-md); color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.costgrid__tag{
  flex: none;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
  padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface);
}
.costgrid__cell--price{
  text-align: right; font-family: var(--font-mono); font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums; color: var(--muted);
}

/* Input de custo — fantasma em repouso, igual ao .sales-input */
.costgrid__cell--cost{ display: flex; justify-content: flex-end; }
.costgrid__cost-wrap{
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  padding: 0 8px;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.costgrid__cost-wrap:hover{ border-color: var(--border); }
.costgrid__cost-wrap:focus-within{ border-color: var(--primary); background: var(--paper); }
.costgrid__cost-prefix{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); flex: none;
}
.costgrid__input{
  width: 74px; border: none; background: transparent; outline: none;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  text-align: right; color: var(--ink); padding: 6px 0;
}
.costgrid__input::placeholder{ color: var(--primary-40, var(--muted)); }
.costgrid__cost-wrap:has(.costgrid__input.has-value){ border-color: var(--border); background: var(--paper); }
.costgrid__input.has-value{ font-weight: 500; }
/* Estimativa por %: itálico + tom mais claro até o dono confirmar/editar */
.costgrid__input.is-estimate{ font-style: italic; color: var(--primary-60); }
.costgrid__cost-wrap:has(.costgrid__input.is-estimate){
  border-style: dashed; border-color: var(--border-strong); background: transparent;
}
/* IA não conseguiu estimar este prato: ponto âmbar discreto, preencha à mão. */
.costgrid__cost-wrap:has(.costgrid__input.estimate-failed){ border-color: #C9A23A; }
.costgrid__input.estimate-failed::placeholder{ color: #B0851F; }

/* Chip de MC compacto — herda os tons do semáforo do modal */
/* Coluna "Cozinha": minutos de mão de obra por prato. Chega preenchida com a
   estimativa lida do cardápio (itálico, como o custo estimado por IA) e vira
   número firme quando o dono corrige — a distinção entre o nosso chute e a
   medida dele não pode sumir da tela. */
.costgrid__cell--min{ display: flex; justify-content: flex-end; }
.costgrid__min-wrap{
  display: inline-flex; align-items: baseline; gap: 4px;
  border: 1px solid transparent; border-radius: var(--r-sm, 6px);
  padding: 3px 8px;
}
.costgrid__min-wrap:hover{ border-color: var(--border); }
.costgrid__min-wrap:focus-within{ border-color: var(--primary); background: var(--paper); }
.costgrid__min-input{
  width: 34px; border: none; background: transparent; text-align: right;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink);
  padding: 0; outline: none;
}
.costgrid__min-input.is-estimate{ font-style: italic; color: var(--primary-60); }
.costgrid__min-input.has-value{ font-weight: 500; }
.costgrid__min-suffix{
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted);
}
.costgrid__min-cost{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  margin-left: 2px;
}

/* Hora de cozinha: um número só, editável, ao lado da explicação da coluna. */
.costgrid__lede--kitchen{ margin-top: 6px; }
.costgrid__kitchen-rate{ display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.costgrid__rate-field{
  display: inline-flex; align-items: baseline; gap: 3px;
  border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  padding: 2px 8px; background: var(--paper);
}
.costgrid__rate-input{
  width: 42px; border: none; background: transparent;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink);
  padding: 0; outline: none;
}
.costgrid__rate-input.is-estimate{ font-style: italic; color: var(--primary-60); }
.costgrid__rate-help{
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: var(--fs-xs); line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.costgrid__rate-help:hover{ color: var(--ink); border-color: var(--primary); }
.costgrid__rate-note{
  margin: 6px 0 0; font-size: var(--fs-sm); color: var(--muted);
  line-height: 1.45; max-width: 66ch;
}

/* Recalcular com o tempo corrigido. Só aparece depois que a cozinha encostou
   em algum prato — antes disso não há nada de novo pra recalcular. */
.costgrid__reprice-wrap{ margin: 8px 0 0; }
.costgrid__reprice{
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid var(--primary); border-radius: var(--r-sm, 6px);
  background: var(--paper); color: var(--ink);
  padding: 7px 12px; cursor: pointer; text-align: left;
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.3;
}
.costgrid__reprice:hover{ background: var(--primary-08, rgba(0,0,0,.04)); }
.costgrid__reprice[disabled]{ opacity: .55; cursor: progress; }
.costgrid__reprice[data-busy]::after{ content: ' recalculando…'; }
.costgrid__reprice-hint{ font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }

.costgrid__cell--mc{ display: flex; justify-content: flex-start; align-items: baseline; gap: 6px; flex-wrap: wrap; }

/* ---- Coluna PREÇO MÍNIMO ------------------------------------------------
   Um número por linha: o preço abaixo do qual o prato dá prejuízo de caixa.
   O tom não é do número — é de onde o preço COBRADO caiu na escada inteira
   (prejuízo · cozinha · meta). Por isso um piso baixo pode aparecer vermelho:
   o vermelho fala do preço de hoje, não do piso. O rótulo embaixo diz qual
   dos quatro andares é, pra o tom nunca precisar ser adivinhado. */
.costgrid__cell--piso{ display: flex; justify-content: flex-end; min-width: 0; }
.costgrid__th--piso{ text-align: right; }
.piso-chip{
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 1px;
  padding: 3px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--paper);
  min-width: 0; max-width: 100%;
}
.piso-chip__val{
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink); white-space: nowrap;
}
.piso-chip__andar{
  font-size: var(--fs-2xs); line-height: 1.2; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.piso-chip[data-tone="green"]{ background: var(--positive-bg); border-color: var(--positive-25); }
.piso-chip[data-tone="green"] .piso-chip__andar{ color: var(--positive); }
.piso-chip[data-tone="yellow"]{ background: var(--gold-10); border-color: var(--gold-30); }
.piso-chip[data-tone="yellow"] .piso-chip__andar{ color: var(--gold-ink); }
.piso-chip[data-tone="red"]{ background: var(--danger-bg); border-color: var(--danger-25); }
.piso-chip[data-tone="red"] .piso-chip__andar{ color: var(--danger); }
/* Sem custo: a célula pede o dado em vez de mostrar um traço mudo. */
.piso-chip--empty{
  border-style: dashed; background: transparent;
  font-size: var(--fs-xs); color: var(--muted); text-align: right; line-height: 1.25;
}

/* A linha do cabeçalho que diz o que a calculadora ainda não tem. */
.costgrid__lede--piso{ color: var(--muted); }
.costgrid__lede--piso[hidden]{ display: none !important; }

/* ---- Ficha contra compra: o intervalo invisível ------------------------
   Uma linha e um botão, dentro do cabeçalho da grade de custo. Faixa
   colorida à esquerda porque é achado, não instrução: precisa se separar
   das duas ledes de cima sem virar caixa de alerta. */
.costgrid__desvio{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 10px 0 0; padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  border-left-width: 3px;
  background: var(--paper);
  font-size: var(--fs-sm); line-height: 1.45; color: var(--ink);
}
.costgrid__desvio[hidden]{ display: none !important; }
.costgrid__desvio b{ font-weight: 600; }
.costgrid__desvio[data-tone="green"]{ border-left-color: var(--positive); background: var(--positive-bg); }
.costgrid__desvio[data-tone="yellow"]{ border-left-color: var(--gold-deep); background: var(--gold-10); }
.costgrid__desvio[data-tone="red"]{ border-left-color: var(--danger); background: var(--danger-bg); }

.costgrid__desvio-btn{
  flex: none;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 7px 12px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.costgrid__desvio-btn:hover{ background: var(--accent-soft); border-color: var(--accent); }
.costgrid__desvio-btn[hidden]{ display: none !important; }
.costgrid__desvio-btn:focus-visible{ outline: 2px solid var(--positive); outline-offset: 1px; }
/* Quantos pontos de margem aquele prato entrega para a cozinha. Fica AO LADO
   da MC, nunca no lugar dela: MC é preço menos insumo e é sobre ela que as
   metas do painel estão calibradas. */
.mc-chip__labor{
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted);
  white-space: nowrap;
}
.mc-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.mc-chip__dot{ width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mc-chip[data-tone="green"]{ background: var(--positive-bg); color: var(--positive); }
.mc-chip[data-tone="green"] .mc-chip__dot{ background: var(--positive); }
.mc-chip[data-tone="yellow"]{ background: var(--gold-12); color: var(--gold-ink); }
.mc-chip[data-tone="yellow"] .mc-chip__dot{ background: var(--gold-deep); }
.mc-chip[data-tone="red"]{ background: var(--danger-bg); color: var(--danger); }
.mc-chip[data-tone="red"] .mc-chip__dot{ background: var(--danger); }
.mc-chip[data-tone="none"]{ background: var(--surface); color: var(--muted); }
.mc-chip[data-tone="none"] .mc-chip__dot{ background: var(--border-strong); }

@media (max-width: 520px){
  .mc-summary__grid{ grid-template-columns: 1fr 1fr; }
  .modal{ max-height: 100dvh; }
  .modal-backdrop{ padding: 0; align-items: flex-end; }
  /* Bottom sheet em mobile precisa deixar o home indicator do iPhone respirar.
     Sem isso o botão "Fechar" pode ficar ocluído pela barra do sistema. */
  .modal{
    border-radius: var(--r-md) var(--r-md) 0 0;
    max-height: 92dvh;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px);
  }
}

/* Grade de custo no mobile: cards empilhados, não tabela espremida */
@media (max-width: 560px){
  .costgrid__head{ flex-direction: column; gap: 14px; }
  /* flex-basis 280px viraria altura em column-flow e abriria um vão enorme */
  .costgrid__heading{ flex: 0 0 auto; }
  .costgrid__estimate{ width: 100%; }
  .costgrid__estimate-controls{ width: 100%; }
  .costgrid__ai{ flex: 1 1 auto; justify-content: center; }
  .costgrid__pct{ flex: 0 0 auto; }
  .costgrid__pct-pop{ right: 0; left: auto; min-width: 220px; max-width: calc(100vw - 48px); }
  .costgrid__pct-field{ flex: 1 1 auto; }
  .costgrid__apply{ flex: 0 0 auto; }

  /* Cabeçalho de colunas some — cada card se rotula sozinho */
  .costgrid__thead{ display: none; }

  .costgrid__row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "item   price"
      "cost   mc"
      "min    min"
      "piso   piso";
    gap: 8px 12px;
    padding: 12px 16px;
    row-gap: 10px;
  }
  .costgrid__cell--item{ grid-area: item; }
  .costgrid__cell--price{ grid-area: price; align-self: center; }
  .costgrid__cell--cost{ grid-area: cost; justify-content: flex-start; }
  .costgrid__cell--mc{ grid-area: mc; justify-content: flex-end; }
  /* O preço mínimo divide a última linha com os minutos de cozinha: os dois
     são leitura curta, e empilhar mais uma linha inteira por prato faria o
     card do celular passar de uma tela em cardápio de 40 itens. O chip se
     rotula sozinho (::before), porque no mobile não há cabeçalho de coluna. */
  /* Linha inteira pro preço mínimo, pela mesma razão que a cozinha ganhou a
     dela: dividido com a cozinha, o chip ou espremia o "6 min R$ 1,80" em duas
     linhas (sem teto de largura) ou estourava a própria caixa (com teto). Os
     dois são leitura de número curto e cada um cabe numa faixa; empilhar custa
     uma linha por prato e é o que mantém as duas legíveis.

     Aqui o chip volta a ser em LINHA — com a faixa inteira disponível, empilhar
     valor e rótulo só faria o card crescer de novo sem ganhar nada. */
  .costgrid__cell--piso{ grid-area: piso; justify-content: flex-start; align-self: center; }
  .piso-chip{ flex-direction: row; align-items: baseline; gap: 8px; }
  .piso-chip__andar{ white-space: nowrap; }
  .piso-chip .piso-chip__val::before{
    content: 'mín. '; font-family: var(--font-mono); font-size: var(--fs-2xs);
    color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
    font-weight: 400;
  }
  /* Minutos ganham a linha inteira no mobile: espremidos ao lado do custo, o
     campo fica pequeno demais pra tocar e o valor em R$ quebra no meio. */
  .costgrid__cell--min{ grid-area: min; justify-content: flex-start; }
  .costgrid__min-wrap{ border-color: var(--border); background: var(--paper); padding: 4px 10px; }
  .costgrid__min-input{ width: 44px; padding: 6px 0; }
  .costgrid__min-wrap::before{
    content: 'cozinha'; font-family: var(--font-mono); font-size: var(--fs-2xs);
    color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
    margin-right: 6px;
  }
  .costgrid__name{ white-space: normal; }
  /* No mobile o input de custo precisa de área de toque maior */
  .costgrid__cost-wrap{
    border-color: var(--border); background: var(--paper);
    padding: 4px 10px;
  }
  .costgrid__input{ width: 90px; padding: 8px 0; }
}

/* ===================================================================
   F3 — Matriz de engenharia de cardápio (Star/Plowhorse/Puzzle/Dog)
   Container clonado do mc-summary; 4 quadrantes coloridos pela paleta
   de semáforo do app (Puzzle = dourado de "oportunidade", não verde).
   =================================================================== */
.matrix-section{
  margin-top: 20px;
  padding: 18px 20px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  opacity: 1;
}
[hidden].matrix-section{ display: none !important; }
/* Entrada discreta ao destravar — fade + leve subida, sem mexer no scroll. */
.matrix-section--in{ animation: matrixIn 280ms ease both; }
@keyframes matrixIn{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.matrix-section__head{ margin-bottom: 16px; }
.matrix-section__title{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--ink); margin: 0 0 4px;
}
.matrix-section__lede{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; margin: 0;
}
.matrix-section__lede b{ color: var(--ink); font-weight: 600; }

/* Plot 2×2 com eixos rotulados (mono, editorial — não planilha). */
.matrix-plot{
  display: grid;
  grid-template-columns: 16px 1fr;
  grid-template-rows: 1fr 16px;
  grid-template-areas: "axisY grid" ". axisX";
  gap: 6px;
}
.matrix-grid{
  grid-area: grid;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.matrix-axis{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60);
  display: flex; align-items: center; justify-content: center;
}
.matrix-axis--y{ grid-area: axisY; writing-mode: vertical-rl; transform: rotate(180deg); }
.matrix-axis--x{ grid-area: axisX; }

.matrix-quad{
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 12px 13px 13px; background: var(--surface);
  min-height: 92px;
}
.matrix-quad__head{
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
}
.matrix-quad__dot{ width: 9px; height: 9px; border-radius: 50%; flex: none; }
.matrix-quad__name{
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  color: var(--ink); flex: 1; line-height: 1.1;
}
.matrix-quad__count{
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 18px; text-align: right;
}
.matrix-quad__chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.matrix-quad__empty{
  font-size: var(--fs-xs); color: var(--muted); font-style: italic;
}

/* Tons por quadrante — usa os mesmos valores do semáforo de MC. */
.matrix-quad[data-tone="star"]{ background: var(--positive-bg); border-color: var(--positive-25); }
.matrix-quad[data-tone="star"] .matrix-quad__dot{ background: var(--positive); }
.matrix-quad[data-tone="puzzle"]{ background: var(--accent-soft); border-color: rgba(201,169,97,0.45); }
.matrix-quad[data-tone="puzzle"] .matrix-quad__dot{ background: var(--accent); }
.matrix-quad[data-tone="plowhorse"]{ background: var(--gold-10); border-color: var(--gold-30); }
.matrix-quad[data-tone="plowhorse"] .matrix-quad__dot{ background: var(--gold-deep); }
.matrix-quad[data-tone="dog"]{ background: var(--danger-bg); border-color: var(--danger-25); }
.matrix-quad[data-tone="dog"] .matrix-quad__dot{ background: var(--danger); }

/* Chip de item dentro do quadrante. */
.matrix-chip{
  display: inline-flex; flex-direction: column; gap: 1px;
  max-width: 100%;
  padding: 5px 9px; border-radius: var(--r-sm);
  background: var(--paper); border: 1px solid var(--border);
}
.matrix-chip__name{
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.matrix-chip__mc{
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.matrix-chip--border{ border-style: dashed; opacity: 0.82; }
.matrix-chip__edge{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--primary-60); margin-top: 1px;
}
/* Margem de segurança no chip (F3): folga de uma Star, risco de um Plowhorse. */
.matrix-chip__safety{
  display: inline-block; margin-top: 3px; align-self: flex-start;
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.02em;
  padding: 1px 6px; border-radius: 999px; line-height: 1.5;
}
.matrix-chip__safety--ok{ color: var(--positive); background: var(--positive-bg); }
.matrix-chip__safety--risk{ color: var(--danger); background: var(--danger-bg); }
/* A AÇÃO DO PRATO. Sai no dourado da casa porque é a única coisa no chip que
   pede um gesto — o resto classifica. Fica na linha de baixo, junto das outras
   marcas, para não empurrar o nome do prato. */
.matrix-chip__acao{
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: var(--r-sm);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Recomendações por quadrante. */
.matrix-recos{
  margin-top: 18px; display: grid; gap: 10px;
}
.matrix-reco{
  border-left: 2px solid var(--border); padding: 2px 0 2px 12px;
}
.matrix-reco[data-tone="star"]{ border-left-color: var(--positive); }
.matrix-reco[data-tone="puzzle"]{ border-left-color: var(--accent); }
.matrix-reco[data-tone="plowhorse"]{ border-left-color: var(--gold-deep); }
.matrix-reco[data-tone="dog"]{ border-left-color: var(--danger); }
.matrix-reco__head{
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  color: var(--ink); margin-bottom: 3px;
}
.matrix-reco__dot{ width: 8px; height: 8px; border-radius: 50%; flex: none; }
.matrix-reco[data-tone="star"] .matrix-reco__dot{ background: var(--positive); }
.matrix-reco[data-tone="puzzle"] .matrix-reco__dot{ background: var(--accent); }
.matrix-reco[data-tone="plowhorse"] .matrix-reco__dot{ background: var(--gold-deep); }
.matrix-reco[data-tone="dog"] .matrix-reco__dot{ background: var(--danger); }
.matrix-reco__text{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; margin: 0 0 3px;
}
.matrix-reco__items{
  font-size: var(--fs-sm); color: var(--ink); font-weight: 500; margin: 0;
}
.matrix-reco__items--cost{
  color: var(--muted); font-weight: 400; margin-top: 6px; line-height: 1.45;
}

/* Recomendação numérica por prato (só Plowhorse). Tripé nome · preço→preço ·
   +R$/sem na linha principal; mercado como contexto secundário. */
.matrix-lines{ list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 7px; }
.matrix-line{ font-size: var(--fs-sm); line-height: 1.4; }
.matrix-line__main{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
}
.matrix-line__name{ color: var(--ink); font-weight: 600; }
.matrix-line__move{ color: var(--ink); font-variant-numeric: tabular-nums; }
.matrix-line__gain{
  color: var(--positive); font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.matrix-line__ctx{
  display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 1px;
}
.matrix-reco__more{
  font-size: var(--fs-xs); color: var(--muted); margin: 7px 0 0; font-style: italic;
}

/* Itens fora da matriz (volume sem MC). */
.matrix-leftovers{
  margin-top: 16px; padding: 12px 14px;
  background: var(--primary-04); border-radius: var(--r-sm);
}
[hidden].matrix-leftovers{ display: none !important; }
.matrix-leftovers__line{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; margin: 0;
}
.matrix-leftovers__line + .matrix-leftovers__line{ margin-top: 5px; }
.matrix-leftovers__line b{ color: var(--ink); font-weight: 600; }

/* Aviso de custo estimado por IA: mesma paleta âmbar do chip de estimativa,
   para o dono ler "isto saiu de um chute da IA, não de medição". */
.matrix-section__estimate{
  font-size: var(--fs-xs); line-height: 1.45; margin: 16px 0 0;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--gold-10); color: var(--gold-ink);
}
[hidden].matrix-section__estimate{ display: none !important; }
.matrix-section__estimate b{ font-weight: 600; }
/* Quando o aviso aparece, a nota metodológica encosta nele (margem menor). */
.matrix-section__estimate:not([hidden]) + .matrix-section__note{ margin-top: 10px; }

#fin-estimate-note{ color: var(--gold-ink); font-weight: 600; }
[hidden]#fin-estimate-note{ display: none; }

.matrix-section__note{
  font-size: var(--fs-xs); color: var(--muted); font-style: italic;
  margin: 16px 0 0; line-height: 1.45;
}

/* =============================================================
   Próximos passos — esforço × impacto.
   Síntese visual das ações que o relatório já deriva. Visível na
   tela e no PDF; estado de repouso quando não há ação. Mesmo
   padrão visual da .matrix-section (papel, borda, Fraunces no h4).
   ============================================================= */
.priority-section{
  margin-top: 28px; padding: 28px 32px;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
[hidden].priority-section{ display: none !important; }
.priority-section__head{ margin-bottom: 18px; }
.priority-section__title{
  font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.2;
  color: var(--ink); margin: 0 0 6px;
}
.priority-section__lede{
  color: var(--muted); font-size: var(--fs-md); line-height: 1.5;
  margin: 0; max-width: 62ch;
}
.priority-section__lede b{ color: var(--ink); font-weight: 600; }
.priority-section__note{
  font-size: var(--fs-xs); color: var(--muted); font-style: italic;
  margin: 18px 0 0; line-height: 1.5; max-width: 62ch;
}
[hidden].priority-section__note{ display: none !important; }

/* SVG do quadrante */
.priority-chart{ width: 100%; }
.priority-svg{ width: 100%; height: auto; max-height: 480px; display: block; }
.priority-svg .priority-frame{
  fill: transparent; stroke: var(--border); stroke-width: 1;
}
.priority-svg .priority-quad-bg--quick{
  fill: var(--accent); opacity: 0.08;
}
.priority-svg .priority-axis{
  stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4;
}
.priority-svg .priority-quad-label{
  font-family: var(--font-mono, monospace); font-size: var(--fs-2xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  fill: var(--ink); font-weight: 600;
}
.priority-svg .priority-quad-label--low{ fill: var(--muted); font-weight: 500; }
.priority-svg .priority-axis-label{
  font-family: var(--font-mono, monospace); font-size: var(--fs-2xs);
  letter-spacing: 0.14em; text-transform: uppercase; fill: var(--muted);
}
.priority-svg .priority-axis-tick{
  font-family: var(--font-mono, monospace); font-size: var(--fs-2xs);
  fill: var(--muted); text-transform: lowercase;
}
.priority-svg .priority-dot{
  fill: var(--ink); stroke: var(--paper); stroke-width: 1.5;
}
.priority-svg .priority-dot--quick{
  fill: var(--accent); stroke: var(--ink); stroke-width: 2;
}
.priority-svg .priority-label{
  font-family: var(--font-display); font-size: var(--fs-xs);
  fill: var(--ink);
}
.priority-svg .priority-label--quick{ font-weight: 600; fill: var(--ink); }
.priority-svg .priority-label__detail{
  font-family: var(--font-mono, monospace); font-size: var(--fs-2xs);
  fill: var(--muted); font-variant-numeric: tabular-nums;
}
.priority-svg .priority-label__tag{
  font-family: var(--font-mono, monospace); font-size: var(--fs-2xs);
  letter-spacing: 0.1em; fill: var(--accent); font-weight: 700;
}
.priority-svg .priority-guide{
  stroke: var(--border); stroke-width: 1; opacity: 0.7;
}

/* Lista fallback (mobile vertical). Some no desktop — só aparece <= 720px
   ou no fallback explícito quando o SVG fica apertado. */
.priority-list{
  list-style: none; padding: 0; margin: 24px 0 0;
  display: none;
}
.priority-list__item{
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr auto;
  align-items: baseline; gap: 8px 14px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.priority-list__item:last-child{ border-bottom: 0; }
.priority-list__quad{
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-mono, monospace); font-size: var(--fs-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.priority-list__quick{
  display: inline-block; font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.priority-list__label{
  font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink);
  line-height: 1.35; grid-column: 1 / -1;
}
.priority-list__detail{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.4;
  grid-column: 1 / -1;
}
.priority-list__item--quick .priority-list__label{ font-weight: 600; }

/* Pills de impacto (compartilhadas entre lista e SVG quando necessário). */
.priority-pill{
  display: inline-block;
  font-family: var(--font-mono, monospace); font-size: var(--fs-xs);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--ink);
  white-space: nowrap;
}
.priority-pill--money{
  background: var(--accent); color: var(--paper);
  border-color: var(--accent); font-weight: 600;
}
.priority-pill--qual[data-tone="alto"]{ border-color: var(--ink); color: var(--ink); }
.priority-pill--qual[data-tone="medio"]{ border-color: var(--border); color: var(--muted); }
.priority-pill--qual[data-tone="baixo"]{ border-color: var(--border); color: var(--muted); }

/* Estado em repouso (sem ações). */
.priority-empty{
  padding: 24px 0; border: 1px dashed var(--border); border-radius: var(--r-md);
  background: transparent;
}
.priority-empty__text{
  margin: 0; padding: 0 28px;
  color: var(--muted); font-size: var(--fs-md); line-height: 1.5;
  font-style: italic; max-width: 62ch;
}

/* Mini-barra por item da roadmap (proporcional ao impacto R$).
   Aparece em qualquer viewport, mas ganha mais valor no mobile onde o
   scatter grande foi escondido. Ancorada no eixo esquerdo da linha,
   com largura fluida — não interfere no layout do label acima. */
.roadmap-item__bar{
  display: block;
  height: 4px;
  margin: 6px 0 0;
  background: var(--primary-04);
  border-radius: 2px;
  overflow: hidden;
}
.roadmap-item__bar-fill{
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width .3s var(--ease);
}
.roadmap-item--warn .roadmap-item__bar-fill{ background: var(--danger); opacity: 0.6; }

/* Mobile vertical: SVG colide em telas pequenas — esconde o quadrante e mostra
   a lista priorizada. <= 720px é o break usado pelo /app inteiro pra alternar
   layouts vertical/horizontal. A roadmap numerada continua visível em mobile
   (substitui visualmente o mapa). */
@media (max-width: 720px){
  .priority-section{ padding: 22px 18px; }
  .priority-chart{ display: none; }
  .priority-list{ display: block; }
  .priority-roadmap{
    margin-top: 4px; padding-top: 0; border-top: 0;
  }
  .roadmap-item{ grid-template-columns: 28px 1fr; }
  .roadmap-item__impact{ grid-column: 2; justify-self: start; margin-top: 4px; }
  /* No mobile a barra ganha mais destaque — 6px de altura ancora leitura. */
  .roadmap-item__bar{ height: 6px; margin-top: 8px; }
}

/* =============================================================
   "Por onde começar" — ordem de execução agrupada em Agora/Depois/
   Avaliar. NÃO inventa calendário; só reagrupa o que o quadrante
   acima já priorizou. Numeração 1..N sequencial cruzando grupos
   (UX/Tech: dono lê "faça 1, 2, 3 — 1 e 2 são agora, 3 é depois").
   Mesma fonte que o SVG, sem recálculo (sem duas verdades).
   ============================================================= */
.priority-roadmap{
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--border);
  /* PDF: evita partir o cabeçalho da roadmap longe do 1o grupo. */
  page-break-inside: avoid;
  break-inside: avoid;
}
.priority-roadmap__head{ margin-bottom: 14px; }
.priority-roadmap__title{
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-lg); line-height: 1.25;
  color: var(--ink); margin: 0 0 4px;
}
.priority-roadmap__lede{
  margin: 0; color: var(--muted); font-size: var(--fs-sm);
  line-height: 1.45; max-width: 62ch;
}

.roadmap-group{
  margin-top: 14px;
  /* Mantém o grupo inteiro junto na paginação do PDF. */
  page-break-inside: avoid;
  break-inside: avoid;
}
.roadmap-group:first-of-type{ margin-top: 6px; }
.roadmap-group__head{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.roadmap-group__label{
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-xs); letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--ink); font-weight: 700;
}
.roadmap-group[data-group="avaliar"] .roadmap-group__label{ color: var(--muted); }
.roadmap-group__hint{
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-sm); color: var(--muted);
}

.roadmap-group__list{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 6px;
}
.roadmap-item{
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: start; gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.roadmap-item:last-child{ border-bottom: 0; }
.roadmap-item__num{
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-md); font-weight: 700; color: var(--ink);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.roadmap-item__body{ display: grid; gap: 3px; min-width: 0; }
.roadmap-item__label{
  font-family: var(--font-display); font-size: var(--fs-md);
  color: var(--ink); line-height: 1.35; word-break: break-word;
}
.roadmap-item__detail{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.4;
}
.roadmap-item__impact{
  align-self: center; flex: none; white-space: nowrap;
}
.roadmap-item--warn .roadmap-item__num{ color: var(--muted); }
.roadmap-item--warn .roadmap-item__label{ color: var(--muted); }
.roadmap-item__warn{
  display: inline-block; margin-top: 4px;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--danger);
  border: 1px solid currentColor; border-radius: 999px;
  padding: 2px 8px;
}

/* =============================================================
   Descrições que vendem — painel de heróis (Star+Puzzle) dentro
   da matriz. Fecha o arco diagnóstico→ação. Veste de cardápio
   (Fraunces itálico, marrom-tinta), não de chat.
   ============================================================= */
.matrix-heroes{
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
[hidden].matrix-heroes{ display: none !important; }
.matrix-heroes__head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.matrix-heroes__intro{ min-width: 0; flex: 1 1 260px; }
.matrix-heroes__title{
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md);
  color: var(--ink); margin: 0 0 3px;
}
.matrix-heroes__lede{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; margin: 0; max-width: 48ch;
}
.matrix-heroes__all{
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.03em;
  text-transform: uppercase; font-weight: 500;
  color: var(--ink); background: var(--accent-soft);
  border: 1px solid rgba(201,169,97,0.45); border-radius: var(--r-sm);
  padding: 7px 12px; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.matrix-heroes__all:hover{ background: rgba(201,169,97,0.30); border-color: var(--accent); }
.matrix-heroes__all:disabled{ opacity: 0.6; cursor: default; }
.matrix-heroes__all-ico{ color: var(--accent); }
[hidden].matrix-heroes__all{ display: none !important; }

.matrix-heroes__progress{
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em;
  color: var(--muted); margin-bottom: 12px;
}
[hidden].matrix-heroes__progress{ display: none !important; }
.matrix-heroes__progress b{ color: var(--ink); }
.matrix-heroes__bar{
  display: inline-block; width: 130px; height: 5px; border-radius: 3px;
  background: var(--accent-soft); overflow: hidden;
}
.matrix-heroes__bar > span{ display: block; height: 100%; background: var(--accent); transition: width .2s var(--ease); }

.matrix-heroes__list{ display: grid; gap: 8px; }

.hero-item{
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: #fff; overflow: hidden;
  transition: border-color .15s var(--ease);
}
.hero-item[data-tone="star"]{ border-left: 3px solid var(--positive); }
.hero-item[data-tone="puzzle"]{ border-left: 3px solid var(--accent); }
.hero-item.is-open{ border-color: rgba(0,0,0,0.14); }
.hero-item__head{
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 11px 13px; background: none; border: none; cursor: pointer;
  text-align: left; font: inherit;
}
.hero-item__dot{ width: 7px; height: 7px; border-radius: 50%; flex: none; }
.hero-item[data-tone="star"] .hero-item__dot{ background: var(--positive); }
.hero-item[data-tone="puzzle"] .hero-item__dot{ background: var(--accent); }
.hero-item__name{
  font-weight: 600; font-size: var(--fs-sm); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.hero-item__quad{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); flex: none;
}
.hero-item__status{
  margin-left: auto; flex: none;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px;
}
.hero-item__status.is-ready{ color: var(--positive); border-color: rgba(47,107,79,0.35); }
.hero-item__chev{ color: var(--muted); flex: none; transition: transform .18s var(--ease); }
.hero-item.is-open .hero-item__chev{ transform: rotate(180deg); }

.hero-drawer{ padding: 0 13px 13px 29px; }
[hidden].hero-drawer{ display: none !important; }
.hero-drawer__variants{ display: grid; gap: 9px; }
.hero-variant{
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  gap: 4px 10px; animation: sell-desc-in .18s var(--ease);
}
.hero-variant__tag{
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.hero-variant__text{
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--fs-md); line-height: 1.4; color: var(--gold-dust);
  padding-left: 9px; border-left: 2px solid var(--accent-soft);
  word-break: break-word; min-width: 0;
}
.hero-variant__copy{
  display: inline-flex; align-items: center; gap: 4px; align-self: center;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gold-dust); opacity: 0.55;
  background: none; border: none; padding: 2px 0; cursor: pointer;
  transition: opacity .15s var(--ease), color .15s var(--ease);
}
.hero-variant__copy:hover{ opacity: 1; }
.hero-variant__copy.is-copied{ opacity: 1; color: var(--positive); }

.hero-drawer__loading{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--accent);
}
.hero-drawer__loading .desc-btn__icon{ animation: sell-desc-pulse 1s var(--ease) infinite; }
.hero-drawer__redo, .hero-drawer__gen{
  display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
  background: none; border: none; padding: 3px 0; cursor: pointer;
  transition: color .15s var(--ease);
}
.hero-drawer__redo:hover, .hero-drawer__gen:hover{ color: var(--ink); }
.hero-drawer__gen{ color: var(--accent); }
.hero-drawer__retry{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.03em;
  color: var(--danger); background: none; border: none; padding: 2px 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}

/* ============================================================
   F4 — Leitura de mix ("De onde vem sua margem")
   Tons herdam dos quadrantes da matriz (star/puzzle/plowhorse/dog)
   ============================================================ */
.mix-reading{
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
  display: grid; gap: 16px;
}
[hidden].mix-reading{ display: none !important; }
.mix-reading__head{ display: grid; gap: 3px; }
.mix-reading__title{
  margin: 0; font-family: var(--font-display); font-size: var(--fs-lg);
  font-weight: 600; color: var(--ink);
}
.mix-reading__lede{ margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }

.mix-block{ display: grid; gap: 8px; }
.mix-block__label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}

/* Barra 100% empilhada — peso da margem por quadrante */
.mix-bar{
  display: flex; height: 16px; border-radius: 5px; overflow: hidden;
  background: var(--border);
}
.mix-bar__seg{ height: 100%; min-width: 2px; transition: width .25s var(--ease); }
.mix-bar__seg[data-tone="star"]{ background: var(--positive); }
.mix-bar__seg[data-tone="puzzle"]{ background: var(--accent); }
.mix-bar__seg[data-tone="plowhorse"]{ background: var(--gold-deep); }
.mix-bar__seg[data-tone="dog"]{ background: var(--danger); }

.mix-legend{ display: flex; flex-wrap: wrap; gap: 6px 16px; }
.mix-legend__item{ display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); }
.mix-legend__dot{
  width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center;
}
.mix-legend__item[data-tone="star"] .mix-legend__dot{ background: var(--positive); }
.mix-legend__item[data-tone="puzzle"] .mix-legend__dot{ background: var(--accent); }
.mix-legend__item[data-tone="plowhorse"] .mix-legend__dot{ background: var(--gold-deep); }
.mix-legend__item[data-tone="dog"] .mix-legend__dot{ background: var(--danger); }
.mix-legend__label{ color: var(--ink); }
.mix-legend__pct{ color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.mix-legend__n{ color: var(--muted); font-size: var(--fs-xs); }

/* Ranking de contribuição em R$ */
.mix-heroes__sub{ margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.mix-heroes__sub b{ color: var(--ink); font-weight: 600; }
.mix-heroes{ list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; }
.mix-hero{
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card, #fff); border-left: 3px solid var(--border);
}
.mix-hero[data-tone="star"]{ border-left-color: var(--positive); }
.mix-hero[data-tone="puzzle"]{ border-left-color: var(--accent); }
.mix-hero[data-tone="plowhorse"]{ border-left-color: var(--gold-deep); }
.mix-hero[data-tone="dog"]{ border-left-color: var(--danger); }
.mix-hero__rank{
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--gold-dust);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
}
.mix-hero__body{ flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.mix-hero__top{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mix-hero__name{
  font-weight: 600; font-size: var(--fs-md); color: var(--ink); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mix-hero__money{
  flex: none; font-weight: 700; font-size: var(--fs-md); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mix-hero__per{ font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.mix-hero__meta{
  display: flex; flex-wrap: wrap; gap: 3px 12px; align-items: baseline;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.02em; color: var(--muted);
}
.mix-hero__share{ color: var(--gold-dust); }
.mix-hero__cum{ color: var(--muted); }

/* Diagnóstico de concentração */
.mix-diagnosis{
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink);
  padding: 11px 13px; border-radius: 8px;
  border-left: 3px solid var(--border); background: var(--accent-soft);
}
.mix-diagnosis[data-tone="warn"]{ background: var(--danger-bg); border-left-color: var(--danger); }
.mix-diagnosis[data-tone="ok"]{ background: var(--positive-bg); border-left-color: var(--positive); }
.mix-diagnosis b{ font-weight: 700; }

.mix-coverage{
  margin: 0; font-size: var(--fs-xs); line-height: 1.4; color: var(--muted);
}
.mix-coverage b{ color: var(--ink); font-weight: 600; }

@media (max-width: 560px){
  .mix-hero__top{ flex-wrap: wrap; }
  .mix-hero__meta{ gap: 2px 10px; }
}

@media (max-width: 560px){
  .matrix-heroes__head{ flex-direction: column; align-items: stretch; }
  .matrix-heroes__all{ justify-content: center; }
  .hero-drawer{ padding-left: 16px; }
  .hero-variant{ grid-template-columns: 1fr; }
  .hero-variant__copy{ justify-self: start; align-self: start; }
}

/* Mobile: empilha os 4 quadrantes em 1 coluna (Star→Plowhorse→Puzzle→Dog),
   sem 2×2 espremido. Eixo Y vira legenda no topo. */
@media (max-width: 560px){
  .matrix-plot{
    grid-template-columns: 1fr; grid-template-rows: auto auto auto;
    grid-template-areas: "axisY" "grid" "axisX";
    gap: 8px;
  }
  .matrix-axis--y{ writing-mode: horizontal-tb; transform: none; justify-content: flex-start; }
  .matrix-axis--x{ justify-content: flex-start; }
  .matrix-grid{ grid-template-columns: 1fr; gap: 8px; }
  .matrix-quad{ min-height: 0; }
}

/* =============================================================
   PERSISTÊNCIA + LOGIN — gate, callback, header de usuário,
   indicador de auto-save, barra de sessão, confirm custom.
   ============================================================= */

/* Quando o gate/callback está ativo, trava o scroll e esconde o app por baixo.
   O overlay é fixed+opaco e cobre o viewport; isto garante que nada vaze
   em telas baixas ou durante o scroll. */
html.gated, html.gated body{ overflow: hidden; height: 100%; }
html.gated .nav:not(.nav--bare),
html.gated .app-main,
html.gated .footer{ visibility: hidden; }

/* ---- Gate de login (deslogado) — página editorial full-screen ---- */
.auth-gate{
  position: fixed; inset: 0; z-index: 200;
  background: var(--surface);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.auth-gate[hidden]{ display: none; }
.nav--bare .nav__inner{ grid-template-columns: auto auto; justify-content: space-between; justify-items: start; }
.auth-gate__main{
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 380px);
  align-items: center; justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  padding: 48px 24px;
}
.auth-gate__panel{
  max-width: 460px; width: 100%;
  text-align: left;
}
/* Coluna de prova: alinha com o baseline do título, cards em stack.
   Reaproveita .proof__card do repouso do app — mesmo desenho, mesma cor.
   Só sobrescreve o gap pra respirar mais em stack vertical. */
.auth-gate__proof{
  display: flex; flex-direction: column; gap: 14px;
  max-width: 380px; width: 100%;
}
.auth-gate__proof-cards{
  grid-template-columns: 1fr;
  gap: 12px;
}
/* Eyebrow "O QUE VOCÊ RECEBE" — variante mais discreta para não competir
   com o eyebrow "ACESSO · PLATAFORMA" da coluna principal. */
.eyebrow--muted{ color: var(--muted); }

/* ---- O TRAÇO DA CASA FORA DA ENTRADA ----

   O desenho do salão deixou de ser um enfeite da porta e virou a língua visual
   do produto (pedido do cliente em 24/08: "onde mais podemos usar essas
   referências?"). Duas regras que impedem isso de virar decoração:

   1. SÓ ONDE O DESENHO DIZ ALGO QUE A PALAVRA NÃO DIZ. O selo do canal separa
      mesa de entrega mais rápido que ler "Salão" e "Delivery"; a planta na
      capa do relatório diz "este documento é sobre uma casa" antes da
      primeira linha. Nenhum dos dois é ilustração de enfeite.
   2. NUNCA COMPETINDO COM O CONTEÚDO. Selo é pequeno e herda a cor do texto;
      a planta da capa é marca d'água atrás das palavras.

   As classes .salao__* são compartilhadas com o desenho da entrada de
   propósito: se um dia o traço mudar, muda nos dois lugares. */

/* O selo do canal — a mesa e a sacola, no traço da casa. */
.seg__ico{
  width: 15px; height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}
.seg__opt{ display: inline-flex; align-items: center; gap: 7px; }

/* ---- A MESA POSTA — o desenho da tela de trabalho ----

   O maior vazio do produto ficava aqui: título e lede na coluna da esquerda, e
   meia página em branco à direita, todo dia, para quem ainda não subiu
   cardápio. O cliente apontou em 24/08 que não via diferença nenhuma no
   design, e este era o lugar onde a ausência mais pesava.

   A mesa vista de cima é o mesmo vocabulário da porta (planta, traço fino,
   dourado em um elemento só). O elemento dourado aqui é a COMANDA — que é
   exatamente o que a pessoa está prestes a colocar na tela.

   Posicionada em absoluto para não empurrar nada: ela ocupa espaço que já
   estava vazio, e some inteira quando a coluna encolhe. */
.app-head{ position: relative; }
.mesa-posta{
  position: absolute;
  /* FORA da coluna de texto, na sarjeta que já estava vazia. Medido: a coluna
     do título tem 760px e a linha de apoio chega a 660 deles — não existe
     espaço ao lado do texto, e a primeira tentativa pôs o desenho POR CIMA da
     lede. À direita da coluna, porém, sobram mais de 400px de nada em telas
     largas, e é lá que ele mora. */
  left: calc(100% + 28px);
  top: 50%;
  transform: translateY(-50%);
  width: 236px;
  margin: 0;
  pointer-events: none;
}
.mesa-posta svg{ width: 100%; height: auto; }
.mesa-posta :where(path, rect, circle){
  fill: none;
  stroke: var(--primary);
  stroke-opacity: 0.30;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mesa-posta__tampo{ stroke-opacity: 0.16; stroke-width: 1.6; }
.mesa-posta__prato{ stroke-opacity: 0.30; }
.mesa-posta__talher,
.mesa-posta__taca{ stroke-opacity: 0.26; }
/* A comanda é o único elemento no dourado da casa: é o gesto que a tela está
   pedindo. Um só, como as duas mesas da entrada — dourado em tudo vira enfeite. */
.mesa-posta__comanda rect{
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-opacity: 0.75;
}
.mesa-posta__comanda path{ stroke: var(--accent); stroke-opacity: 0.55; }

/* Quem já tem análise na tela não precisa do convite: o desenho some junto com
   o título, pelo mesmo motivo. */
.app-head[data-mode="analisado"] .mesa-posta{ display: none; }
/* Abaixo de 1280px a sarjeta acaba e o desenho sairia da tela (ou espremeria
   a coluna de texto). Desenho que disputa espaço com a palavra deixou de
   ajudar — some inteiro. */
@media (max-width: 1280px){
  .mesa-posta{ display: none; }
}

/* ---- A FORMA DA SEMANA ----

   Sete linhas, uma por dia, com o custo daquele dia NA PRÓPRIA LINHA: é onde a
   pessoa está olhando quando mexe no número, e ver a conta mudar ao lado do
   campo é o que faz o bloco ensinar em vez de só coletar. */
.forma{
  margin: 20px 0 0;
  padding: 18px 18px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.forma[hidden]{ display: none; }
.forma__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); letter-spacing: 0.08em; color: var(--muted);
}
.forma__title{
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.forma__lede{ margin: 0 0 14px; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); max-width: 620px; }

.forma__grade{ display: flex; flex-direction: column; }
.forma-linha{
  display: grid;
  grid-template-columns: 88px 1fr 1fr 120px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.forma-linha:last-child{ border-bottom: none; }
.forma-linha__dia{ font-size: var(--fs-sm); color: var(--ink); }
.forma-linha__campo{ display: flex; align-items: center; gap: 7px; }
.forma-linha__campo .closes__input{ width: 72px; text-align: right; }
.forma-linha__un{ font-size: var(--fs-xs); color: var(--muted); }
.forma-linha__custo{
  text-align: right;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink);
  white-space: nowrap;
}
/* O peso do dia acompanha o valor, menor e apagado: é contexto, não número
   que se leva pra reunião. */
.forma-linha__custo em{
  display: inline-block; margin-left: 7px;
  font-style: normal; font-size: 0.78em; color: var(--muted);
}
.forma-linha__custo--vazio{ color: var(--muted); }

.forma__aviso{
  margin: 14px 0 0;
  padding: 9px 12px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink);
}
/* O aviso do que falta é neutro: não é risco, é uma peça que ainda não chegou. */
.forma__aviso--falta{ border-left-color: var(--border-strong); background: var(--primary-04); }
.forma__aviso[hidden]{ display: none; }

/* No celular a linha vira duas: o dia e o custo em cima, os dois campos
   embaixo. Quatro colunas em 402px é o erro que já custou os botões
   sobrepostos do caixa. */
@media (max-width: 620px){
  .forma-linha{
    grid-template-columns: 1fr auto;
    row-gap: 6px;
    padding: 10px 0;
  }
  .forma-linha__dia{ grid-column: 1; grid-row: 1; font-weight: 500; }
  .forma-linha__custo{ grid-column: 2; grid-row: 1; }
  .forma-linha__campo:nth-of-type(1){ grid-column: 1; grid-row: 2; }
  .forma-linha__campo:nth-of-type(2){ grid-column: 2; grid-row: 2; justify-content: flex-end; }
}

/* ---- OS INSUMOS DA CASA ----

   Mesmo desenho dos blocos irmãos. A única cor forte é a da idade: preço velho
   ganha a data em vermelho, e só ela — pintar a linha inteira faria cinco
   preços de mês passado parecerem uma emergência. */
.insumos{
  margin: 20px 0 0;
  padding: 18px 18px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.insumos[hidden]{ display: none; }
.insumos__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); letter-spacing: 0.08em; color: var(--muted);
}
.insumos__title{
  margin: 4px 0 14px;
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.insumos__aviso{
  margin: 0 0 12px;
  padding: 9px 12px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink);
}
/* O custo por pedido não é alerta — é uma conta que estava invisível e passou
   a estar visível. Tom neutro. */
.insumos__aviso--pedido{ border-left-color: var(--border-strong); background: var(--primary-04); }
.insumos__aviso[hidden]{ display: none; }

.insumos__form-linha{
  display: grid;
  grid-template-columns: 1fr 90px 160px;
  gap: 10px;
}
.insumos__check{
  display: flex; align-items: flex-start; gap: 8px;
  margin: 10px 0 0;
  font-size: var(--fs-sm); line-height: 1.45; color: var(--muted);
}
.insumos__check input{ margin-top: 2px; flex: 0 0 auto; }

.insumos__lista{ margin-top: 14px; display: flex; flex-direction: column; }
.insumos__vazio{ margin: 0; font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
.insumo-linha{
  display: grid;
  grid-template-columns: 1fr auto 92px 118px auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.insumo-linha:last-child{ border-bottom: none; }
.insumo-linha__nome{ color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insumo-linha__tag{
  margin-left: 6px; padding: 1px 6px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted);
}
.insumo-linha__preco{ font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }
.insumo-linha__preco em{ font-style: normal; color: var(--muted); font-size: 0.8em; }
.insumo-linha__idade{ font-size: var(--fs-xs); color: var(--muted); text-align: right; }
.insumo-linha.is-velho .insumo-linha__idade{ color: var(--danger); font-weight: 500; }
.insumo-linha__pratos{ font-size: var(--fs-xs); color: var(--muted); text-align: right; }
.insumo-linha__pratos em{ font-style: italic; opacity: 0.8; }

/* No celular a linha vira duas: nome e preço em cima, idade e pratos embaixo.
   Cinco colunas em 402px é o mesmo erro que os botões sobrepostos do caixa. */
@media (max-width: 620px){
  .insumos__form-linha{ grid-template-columns: 1fr; }
  .insumo-linha{
    grid-template-columns: 1fr auto auto;
    row-gap: 4px;
  }
  .insumo-linha__nome{ grid-column: 1 / -1; grid-row: 1; }
  .insumo-linha__preco{ grid-column: 1; grid-row: 2; }
  .insumo-linha__idade{ grid-column: 2; grid-row: 2; text-align: left; }
  .insumo-linha__pratos{ grid-column: 3; grid-row: 2; }
  .insumo-linha .closes__link{ grid-column: 1 / -1; grid-row: 3; justify-self: end; }
}

/* ---- O CAIXA QUE OLHA PRA FRENTE ----

   Mesmo desenho dos blocos irmãos (cartões em linha, avisos recuados), com uma
   diferença: aqui o cartão da diferença pode ficar vermelho, e o aviso do que
   já venceu é o único do produto que fala de atraso. Ele leva a cor de dano,
   não a dourada — não é leitura de risco futuro, é conta que já passou. */
.caixa{
  margin: 20px 0 0;
  padding: 18px 18px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.caixa[hidden]{ display: none; }
.caixa__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); letter-spacing: 0.08em; color: var(--muted);
}
.caixa__title{
  margin: 4px 0 14px;
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.caixa__cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.caixa-card{
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.caixa-card[data-tone="bom"]{ border-left-color: var(--positive); }
.caixa-card[data-tone="alerta"]{ border-left-color: var(--danger); }
.caixa-card__rot{ font-size: var(--fs-xs); line-height: 1.35; color: var(--muted); }
.caixa-card__val{
  font-family: var(--font-mono);
  font-size: var(--fs-lg); font-weight: 500; color: var(--ink);
}
.caixa-card__val--saida{ color: var(--danger); }
.caixa-card__sub{ font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }

.caixa__aviso{
  margin: 12px 0 0;
  padding: 9px 12px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink);
}
.caixa__aviso--vencido{ border-left-color: var(--danger); background: var(--danger-bg); }
.caixa__aviso[hidden]{ display: none; }

/* O saldo fica à vista, não escondido atrás de um botão: é ele que destrava a
   única frase deste bloco que o dono realmente quer ouvir. */
.caixa__saldo{
  display: block;
  margin: 14px 0 0;
  padding: 11px 12px;
  background: var(--primary-04);
  border-left: 2px solid var(--border);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.caixa__saldo-rot{ display: block; margin-bottom: 6px; font-size: var(--fs-sm); color: var(--ink); }
.caixa__saldo-nota{ display: block; margin-top: 6px; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }

.caixa__form{ margin-top: 14px; }
.caixa__form-linha{
  display: grid;
  grid-template-columns: 130px 1fr 140px;
  gap: 10px;
}
/* No celular a linha vira coluna: três campos espremidos em 402px viram três
   campos que ninguém preenche. É de lá que o dono anota o boleto. */
@media (max-width: 620px){
  .caixa__form-linha{ grid-template-columns: 1fr; }
}

.caixa__lista{ margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.caixa__vazio{ margin: 0; font-size: var(--fs-sm); color: var(--muted); font-style: italic; }
.caixa-linha{
  display: grid;
  grid-template-columns: 52px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.caixa-linha:last-child{ border-bottom: none; }
.caixa-linha__data{ font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.caixa-linha__desc{ color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caixa-linha__valor{ font-family: var(--font-mono); color: var(--ink); }
/* A conta que já passou da data. Só a data muda de cor — pintar a linha
   inteira de vermelho faria três atrasos parecerem uma emergência. */
.caixa-linha.is-atrasada .caixa-linha__data{ color: var(--danger); font-weight: 500; }
@media (max-width: 620px){
  /* No celular a linha quebra em duas: o dado em cima, as ações embaixo. Os
     dois botões precisam de COLUNAS diferentes — mandar os dois pra mesma
     área do grid os empilha um sobre o outro, e "dar baixa" e "remover"
     viram um borrão ilegível. Pegou na primeira foto em 402px, que é a
     largura de onde o dono anota o boleto. */
  .caixa-linha{
    grid-template-columns: 52px 1fr auto;
    row-gap: 6px;
  }
  .caixa-linha__data{ grid-column: 1; grid-row: 1; }
  .caixa-linha__desc{ grid-column: 2; grid-row: 1; }
  .caixa-linha__valor{ grid-column: 3; grid-row: 1; }
  .caixa-linha .closes__link{ grid-row: 2; justify-self: end; }
  .caixa-linha .closes__link:nth-of-type(1){ grid-column: 2; }
  .caixa-linha .closes__link:nth-of-type(2){ grid-column: 3; }
}

/* ---- O CANAL DENTRO DO MÊS ----

   Quatro cartões em linha, na ordem em que a conta desce: o que o delivery
   trouxe, o que o aplicativo levou, o que sobra na régua do dono e o que
   sobraria na régua da casa. O tom (bom/alerta) vem do sinal do número — e as
   duas últimas podem discordar entre si de propósito: é essa distância que É a
   discussão. */
.canal-mes{
  margin: 20px 0 0;
  padding: 18px 18px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.canal-mes[hidden]{ display: none; }
.canal-mes__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); letter-spacing: 0.08em;
  color: var(--muted);
}
.canal-mes__title{
  margin: 4px 0 14px;
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 600; color: var(--ink);
  letter-spacing: -0.01em;
}
.canal-mes__cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.canal-card{
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.canal-card[data-tone="bom"]{ border-left-color: var(--positive); }
.canal-card[data-tone="alerta"]{ border-left-color: var(--danger); }
.canal-card__rot{
  font-size: var(--fs-xs); line-height: 1.35; color: var(--muted);
}
.canal-card__val{
  font-family: var(--font-mono);
  font-size: var(--fs-lg); font-weight: 500; color: var(--ink);
}
.canal-card__val--saida{ color: var(--danger); }
.canal-card__sub{ font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
/* O aviso da virada e o da divergência. O primeiro é leitura de risco (dourado
   da casa); o segundo é uma pergunta ao dono, e por isso é mais neutro. */
.canal-mes__aviso{
  margin: 12px 0 0;
  padding: 9px 12px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink);
}
.canal-mes__aviso--confere{
  border-left-color: var(--border-strong);
  background: var(--primary-04);
}
.canal-mes__aviso[hidden]{ display: none; }

/* Os campos do recorte por canal no formulário do mês: recuados e menores que
   o faturamento acima, porque são decomposição dele — não outro número. */
.closes__canal{
  margin: 2px 0 4px;
  padding: 10px 12px;
  border-left: 2px solid var(--border);
  background: var(--primary-04);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.closes__canal-titulo{
  display: block; margin-bottom: 8px;
  font-size: var(--fs-sm); color: var(--ink);
}
.closes__canal-campos{
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 560px){
  .closes__canal-campos{ grid-template-columns: 1fr; }
}

/* ---- A CURVA QUE AINDA NÃO EXISTE ----

   O desenho da tela vazia dos meses fechados. Mostra a forma que a leitura vai
   tomar, em vez de descrevê-la em parágrafo: o eixo, as marcas dos meses, a
   curva pontilhada (ainda não é dado — é promessa) e o ponto cheio no começo,
   no dourado da casa, que é o primeiro fechamento.

   A curva é DASHED de propósito. Linha cheia aqui pareceria dado real numa
   tela que não tem dado nenhum, e nada corrói mais rápido a confiança num
   painel do que um gráfico que desenha número inventado. */
.curva-fantasma{
  margin: 0 auto 14px;
  max-width: 320px;
}
.curva-fantasma svg{ width: 100%; height: auto; }
.curva-fantasma__eixo,
.curva-fantasma__meses path{
  fill: none;
  stroke: var(--primary);
  stroke-opacity: 0.28;
  stroke-width: 1.3;
  stroke-linecap: round;
}
.curva-fantasma__meses path{ stroke-opacity: 0.20; }
.curva-fantasma__linha{
  fill: none;
  stroke: var(--primary);
  stroke-opacity: 0.30;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 4 6;
}
.curva-fantasma__ponto{
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 1.8;
}

/* O recado da casa que vende nos dois. Tom de aviso discreto: é informação
   sobre o recorte da leitura, não erro nem alerta. */
.channel__ambos{
  margin: 8px 0 0;
  padding: 7px 10px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink);
}
.channel__ambos[hidden]{ display: none; }
.seg__opt.is-active .seg__ico{ opacity: 1; }

/* A planta na capa do relatório. Marca d'água: fica atrás do texto, apagada,
   e a capa continua sendo documento. Só existe no papel — na tela a capa do
   PDF nem aparece. */
.pdf-cover__salao{
  position: absolute;
  right: 7%;
  bottom: 13%;
  width: 44%;
  opacity: 0.62;
  pointer-events: none;
}
.pdf-cover__salao svg{ width: 100%; height: auto; }
.pdf-cover__salao :where(path, rect, circle){
  fill: none;
  stroke: var(--primary);
  stroke-opacity: 0.22;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pdf-cover__salao .salao__piso{ fill: rgba(201,169,97,0.05); stroke: none; }
.pdf-cover__salao .salao__parede{ stroke-opacity: 0.30; stroke-width: 1.6; }
.pdf-cover__salao .salao__folha{ fill: var(--primary-08); stroke-opacity: 0.26; }
.pdf-cover__salao .salao__varredura{ stroke-opacity: 0.14; stroke-dasharray: 3 5; }
.pdf-cover__salao .salao__bancada rect,
.pdf-cover__salao .salao__passagem rect{ fill: var(--primary-04); }
.pdf-cover__salao .salao__lugar,
.pdf-cover__salao .salao__tampo,
.pdf-cover__salao .salao__risco{ stroke-opacity: 0.18; stroke-width: 1.1; }
.pdf-cover__salao .salao__mesa--viva{
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-opacity: 0.55;
}

/* ---- O SALÃO EM PLANTA BAIXA — o desenho da entrada ----

   Traço, nunca foto (ver o porquê no comentário do index.html). Todo o desenho
   é feito de linha e vazio: fundo de papel, paredes e mesas em petróleo
   diluído, e o dourado da casa entrando em DUAS mesas só. Se o dourado
   aparecesse em todas, viraria enfeite; em duas, ele diz a coisa que o produto
   inteiro diz — parte da casa paga a conta, parte não.

   Nada aqui é clicável nem legível por leitor de tela: é atmosfera, e o
   conteúdo real (as três promessas) vem logo abaixo em texto. */
.salao{
  margin: 0 0 20px;
  padding: 14px 12px 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* O calor que o traço sozinho não dá: uma luz baixa no canto da sala, no
     dourado da casa. É o que separa "planta de arquiteto" de "casa". */
  background-image: radial-gradient(120% 95% at 76% 16%, var(--accent-soft), transparent 60%);
}
.salao svg{ width: 100%; height: auto; }

/* Todo o desenho é linha, e a linha é a mesma: petróleo diluído sobre papel.
   O que muda entre as peças é só quanta luz cada uma leva. */
.salao svg :where(path, rect, circle){
  fill: none;
  stroke: var(--primary);
  stroke-opacity: 0.38;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* O piso é o único elemento sem traço: ele não desenha nada, só diz que
   deste lado da parede é dentro. */
.salao svg .salao__piso{ fill: rgba(201,169,97,0.055); stroke: none; }
/* A folha da porta é matéria, não risco — cheia, como no desenho de planta. */
.salao svg .salao__folha{ fill: var(--primary-15); stroke-opacity: 0.4; }
.salao svg .salao__parede{ stroke-opacity: 0.46; stroke-width: 1.7; }
/* A varredura da porta é o único traço que não é matéria — é movimento.
   Pontilhada, e mais apagada que a folha que a produz. */
.salao svg .salao__varredura{ stroke-opacity: 0.20; stroke-dasharray: 3 5; }
/* Bancada e expedição são superfície de trabalho: o preenchimento leve as faz
   ler como móvel, e não como mais uma mesa vista de cima. */
.salao svg .salao__bancada rect,
.salao svg .salao__passagem rect{ fill: var(--primary-04); }
.salao svg .salao__tampo,
.salao svg .salao__risco{ stroke-opacity: 0.22; stroke-width: 1.2; }
/* Os lugares — as pessoas que ainda não chegaram. Mais leves que a mesa, senão
   a sala vira um campo de bolinhas. */
.salao svg .salao__lugar{ stroke-opacity: 0.28; stroke-width: 1.2; }

/* AS DUAS MESAS VIVAS. Se o dourado aparecesse em todas, seria enfeite. Em
   duas, ele diz o que o produto inteiro diz: parte da casa paga a conta,
   parte não. */
.salao svg .salao__mesa--viva{
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-opacity: 0.9;
  stroke-width: 1.6;
}

@media (max-width: 900px){
  /* No celular a coluna da direita cai embaixo do formulário. O desenho
     encolhe pra não empurrar as três promessas pra fora da tela. */
  .salao{ margin-bottom: 16px; padding: 10px 10px 8px; }
}
@media (max-width: 900px){
  .auth-gate__main{
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 24px;
  }
  .auth-gate__panel,
  .auth-gate__proof{ max-width: 460px; margin: 0 auto; }
}
.auth-gate__title{
  font-family: var(--font-display);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.08;
  color: var(--primary);
  margin: 12px 0 16px;
  letter-spacing: -0.02em;
}
.auth-gate__lede{
  color: var(--muted);
  font-size: var(--fs-md); line-height: 1.6;
  margin: 0 0 28px;
  max-width: 400px;
}
.google-btn{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 500;
  color: var(--ink);
  transition: background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease);
}
.google-btn:hover{ background: #fff; border-color: var(--primary-60); transform: translateY(-1px); }
.google-btn:active{ transform: translateY(0); }
.google-btn__icon{ display: inline-flex; }
.auth-gate__note{
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.02em;
  color: var(--primary-60);
}
/* ---- A porta do e-mail (migração 038) ----
   Vive debaixo do botão do Google, no mesmo painel. O "ou" é uma linha com a
   palavra no meio: sem ela, o campo de e-mail logo abaixo do botão parece um
   segundo passo do Google — e a pessoa que veio justamente porque não tem
   Google hesita. */
.auth-alt{ margin-top: 22px; max-width: 400px; }
.auth-alt[hidden]{ display: none; }
.auth-alt__ou{
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
  color: var(--primary-60);
  font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
}
.auth-alt__ou::before,
.auth-alt__ou::after{
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.auth-alt__form[hidden]{ display: none; }
.auth-alt__label{
  display: block;
  font-size: var(--fs-sm); line-height: 1.5;
  color: var(--muted);
  margin: 0 0 8px;
}
.auth-alt__linha{ display: flex; gap: 8px; flex-wrap: wrap; }
.auth-alt__campo{
  flex: 1 1 190px; min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit; font-size: var(--fs-md);
}
.auth-alt__campo:focus{ outline: 2px solid var(--primary-60); outline-offset: 1px; }
/* O código é lido do e-mail e digitado olhando pro celular: monoespaçado e
   espaçado, para conferir número a número sem perder a posição. */
.auth-alt__campo--codigo{
  flex: 0 1 150px;
  font-family: var(--font-mono);
  font-size: var(--fs-lg); letter-spacing: 0.22em;
}
.auth-alt__btn{
  padding: 12px 18px;
  border: 1px solid var(--primary);
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--paper);
  font-size: var(--fs-md); font-weight: 500;
  transition: opacity .15s var(--ease), transform .12s var(--ease);
}
.auth-alt__btn:hover{ opacity: .88; transform: translateY(-1px); }
.auth-alt__btn:disabled{ opacity: .5; transform: none; cursor: default; }
.auth-alt__voltar{
  margin-top: 10px;
  background: none; border: 0; padding: 0;
  color: var(--muted);
  font-size: var(--fs-sm); text-decoration: underline;
}
.auth-alt__msg{
  margin: 12px 0 0;
  font-size: var(--fs-sm); line-height: 1.5;
  color: var(--muted);
}
.auth-alt__msg[hidden]{ display: none; }
.auth-alt__msg--err{ color: var(--danger); }

.auth-gate__err{
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--r-md);
  color: var(--danger);
  font-size: var(--fs-sm);
}
.auth-gate__err[hidden]{ display: none; }

/* ---- Tela de callback (retorno OAuth) ---- */
.auth-loading{
  position: fixed; inset: 0; z-index: 210;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.auth-loading[hidden]{ display: none; }
.auth-loading__box{
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  color: var(--primary);
}
.auth-loading__mark{ color: var(--primary); opacity: .9; }
.auth-loading__spinner{
  width: 22px; height: 22px;
  border: 2px solid var(--primary-15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: auth-spin .8s linear infinite;
}
@keyframes auth-spin{ to{ transform: rotate(360deg); } }
.auth-loading__text{
  font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary-60);
}

/* ---- Indicador de auto-save (header) — efêmero ---- */
.save-status{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.04em;
  color: var(--primary-60);
  transition: opacity .3s var(--ease);
}
.save-status[hidden]{ display: none; }
.save-status__dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--positive);
  transition: background .2s var(--ease);
}
.save-status[data-state="saving"] .save-status__dot{
  background: var(--accent);
  animation: save-pulse 1s ease-in-out infinite;
}
.save-status[data-state="error"]{ color: var(--danger); }
.save-status[data-state="error"] .save-status__dot{ background: var(--danger); }
@keyframes save-pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }

/* ---- Menu de usuário (header) — dropdown custom ---- */
.usermenu{ position: relative; }
.usermenu[hidden]{ display: none; }
.usermenu__trigger{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 5px;
  border-radius: 999px;
  transition: background .15s var(--ease);
}
.usermenu__trigger:hover{ background: var(--primary-04); }
.usermenu__avatar{
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase;
  overflow: hidden;
}
.usermenu__avatar img{ width: 100%; height: 100%; object-fit: cover; }
.usermenu__name{
  font-size: var(--fs-sm); font-weight: 500; color: var(--primary);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usermenu__flag{ width: 20px; height: 15px; object-fit: cover; border-radius: 2px; display: block; }
.usermenu__flag[hidden]{ display: none; }
.usermenu__chevron{ color: var(--primary-60); transition: transform .18s var(--ease); }
.usermenu__trigger[aria-expanded="true"] .usermenu__chevron{ transform: rotate(180deg); }
.usermenu__pop{
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 6px;
  z-index: 50;
}
.usermenu__pop[hidden]{ display: none; }
.usermenu__id{ padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.usermenu__id-name{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.usermenu__id-email{ font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--primary-60); overflow: hidden; text-overflow: ellipsis; }
.usermenu__divider{ height: 1px; background: var(--border); margin: 4px 0; }
.usermenu__item{
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink);
  transition: background .12s var(--ease);
}
.usermenu__item:hover{ background: var(--primary-04); }
/* `display:block` acima é regra de autor e vence o `[hidden]` do browser — sem
   esta linha, item escondido do menu aparece pra todo mundo (era o caso do
   "Preparar conta-demo", que é de administrador e estava na tela do dono). */
.usermenu__item[hidden]{ display: none; }
.usermenu__item--admin{
  font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--primary-60);
}
.usermenu__item--admin:disabled{ opacity: 0.5; cursor: progress; }
/* A língua da conta: três bandeiras lado a lado, a ativa marcada por peso e
   contorno (não só por cor). Bandeiras 4:3, nunca esticadas. */
.usermenu__idiomas{ display: flex; gap: 4px; padding: 4px 8px 6px; }
/* O idioma dentro de "Meus ajustes" e do convite da primeira visita: a mesma
   fileira de bandeiras do menu da conta, com rótulo, porque ali ninguém
   procura atrás de um avatar. */
.lingua__idioma{ display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; }
.lingua__idioma-rotulo{ font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.lingua__idioma-bandeiras{ padding: 0; }
.usermenu__idioma{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 9px; border-radius: var(--r-sm); border: 1px solid transparent;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em;
  color: var(--primary-60); transition: background .12s var(--ease), border-color .12s var(--ease);
}
.usermenu__idioma img{ width: 20px; height: 15px; object-fit: cover; border-radius: 2px; display: block; }
.usermenu__idioma:hover{ background: var(--primary-04); }
.usermenu__idioma[aria-pressed="true"]{ border-color: var(--border); background: var(--primary-04); color: var(--ink); font-weight: 600; }
.usermenu__idioma:disabled{ opacity: 0.5; cursor: progress; }

/* ---- Barra de sessão (app-head) — última análise + nova análise ---- */
.session-bar{
  display: flex; align-items: center; gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.session-bar[hidden]{ display: none; }
.session-bar__meta{
  font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--primary-60);
}
.session-bar__new{
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--primary);
  background: transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.session-bar__new:hover{ background: var(--primary-04); border-color: var(--primary); }
.session-bar__new[hidden]{ display: none; }
/* O caminho de volta ao relatório guardado. Este tem peso: é o gesto que
   devolve o trabalho que a pessoa já fez, e a única coisa aqui em cima que ela
   pode estar procurando com pressa. */
.session-bar__ver{
  padding: 6px 14px;
  border: 1px solid var(--primary);
  border-radius: var(--r-md);
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--surface);
  background: var(--primary);
  transition: background .15s var(--ease);
}
.session-bar__ver:hover{ background: #14222F; }
.session-bar__ver[hidden]{ display: none; }
/* A porta da estante. Mesmo peso do "subir outro cardápio" — as duas são
   caminhos, não decisões; nenhuma pede mais atenção que a outra. */
.session-bar__hist{
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--primary);
  background: transparent;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.session-bar__hist:hover{ background: var(--primary-04); border-color: var(--primary); }
.session-bar__hist[hidden]{ display: none; }

/* ===================================================================
   A FAIXA DE ARQUIVO — o relatório na tela é de outro dia.

   Cor de aviso, não de erro: nada está quebrado, mas ler estes números
   como se fossem os de hoje é o erro mais caro que esta tela permite.
   Fica ACIMA de tudo no relatório e sai no PDF junto (sem .no-print no
   texto): quem imprime o arquivo imprime a data.
   =================================================================== */
.arquivo-bar{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 15px; margin-bottom: 18px;
  /* Dourado fosco do sistema (--accent): a cor de "olhe para isto" desta
     interface. Vermelho seria mentira — não há nada errado em consultar o
     arquivo, e alarme falso repetido é como se ensina a ignorar alarme. */
  background: rgba(201, 169, 97, 0.10);
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: var(--r-md);
}
.arquivo-bar[hidden]{ display: none; }
.arquivo-bar__txt{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; min-width: 0; }
.arquivo-bar__tag{
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); letter-spacing: 0.09em;
  padding: 2px 7px; border-radius: 3px;
  background: var(--accent-soft);
  color: #6E5620;
}
.arquivo-bar__meta{ font-size: var(--fs-sm); color: var(--ink); }
.arquivo-bar__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 560px){
  .arquivo-bar__actions{ width: 100%; }
  .arquivo-bar__actions .btn{ flex: 1 1 auto; justify-content: center; }
}

/* ===================================================================
   A ESTANTE — lista de leituras anteriores da casa.

   Uma linha por leitura, a mais nova em cima e marcada como ATUAL. A
   linha inteira é feita pra ser reconhecida de relance: a data primeiro
   (é por ela que se procura), o resto na segunda linha em tom menor.
   =================================================================== */
.modal--historico{ max-width: 620px; }
.hist__list{ display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; }
/* A comparação ocupa o lugar da lista dentro da mesma janela — sem esta
   regra o `display: flex` acima segura a lista na tela e as duas se
   empilham, cada uma respondendo uma pergunta diferente. */
.hist__list[hidden]{ display: none; }
.hist__item{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
/* A que está valendo. O contorno faz o trabalho que o rótulo faria em
   dobro — quem varre a lista com o olho para aqui primeiro. */
.hist__item.is-atual{ background: var(--primary-04); border-color: var(--primary-15); }
.hist__info{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hist__when{
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-md); font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.hist__tag{
  font-family: var(--font-mono);
  font-size: var(--fs-2xs); letter-spacing: 0.09em;
  padding: 2px 6px; border-radius: 3px;
  background: var(--primary-15); color: var(--primary);
}
.hist__meta{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
/* O movimento do preço médio contra a leitura anterior. Sem cor de
   julgamento: subir preço não é bom nem ruim por si — é o fato que o
   dono veio conferir. */
.hist__delta{ font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em; color: var(--ink); }
.hist__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hist__del{ color: var(--muted); }
.hist__del:hover{ color: var(--danger); border-color: currentColor; }
.hist__empty{ font-size: var(--fs-md); color: var(--muted); padding: 14px 2px; }

/* ===================================================================
   DUAS LEITURAS LADO A LADO.

   A hierarquia da tela é a da conclusão: primeiro o par de números que
   responde "eu acertei o reajuste?" (o seu movimento e o da região,
   sobre os mesmos pratos), depois a frase que junta os dois, e só então
   o prato a prato. Quem só quer a resposta lê as duas primeiras linhas
   e fecha.
   =================================================================== */
.hist-cmp[hidden]{ display: none; }
.hist-cmp__pick{
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  margin: 14px 0 4px;
}
.hist-cmp__field{ display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 200px; }
.hist-cmp__field > span{
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}
.hist-cmp__select{
  font: inherit; font-size: var(--fs-sm); color: var(--ink);
  background: var(--paper); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 7px 9px; width: 100%;
}
.hist-cmp__arrow{ color: var(--muted); padding-bottom: 9px; }

/* O par de medidas. Lado a lado de propósito: é a comparação ENTRE eles
   que informa, e empilhá-los faria cada um ser lido sozinho. */
.cmp-veredito{ display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 12px; }
.cmp-medidor{
  flex: 1 1 200px; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  background: var(--primary-04); border: 1px solid var(--primary-15);
  border-radius: var(--r-md);
}
.cmp-medidor__rot{
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}
/* Sem cor de julgamento: subir preço não é bom nem ruim por si, e pintar
   de verde ou vermelho seria o produto opinando antes do dono ler. */
.cmp-medidor__val{ font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--ink); line-height: 1.1; }
.cmp-medidor__leg{ font-size: var(--fs-xs); color: var(--muted); }
.cmp-frase{ font-size: var(--fs-md); color: var(--ink); margin: 0 0 16px; line-height: 1.5; }

.cmp-secao{
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
  margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.cmp-tabela{ display: flex; flex-direction: column; }
.cmp-linha{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "nome precos mov" "ctx ctx ctx";
  align-items: baseline; gap: 2px 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--border);
}
.cmp-linha:last-child{ border-bottom: none; }
.cmp-linha--simples{ grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome precos"; }
.cmp-linha__nome{ grid-area: nome; font-size: var(--fs-md); color: var(--ink); display: flex; flex-direction: column; gap: 1px; }
.cmp-linha__antes{ font-size: var(--fs-xs); color: var(--muted); }
.cmp-linha__precos{ grid-area: precos; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.cmp-linha__preco{ grid-area: precos; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); }
.cmp-linha__mov{ grid-area: mov; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; }
.cmp-linha__ctx{ grid-area: ctx; font-size: var(--fs-xs); color: var(--muted); }
.cmp-linha__ctx:empty{ display: none; }
.hist__err{ font-size: var(--fs-sm); color: var(--danger); margin-top: 10px; }
@media (max-width: 560px){
  .hist__item{ align-items: stretch; }
  .hist__actions{ width: 100%; }
  .hist__actions .btn{ flex: 1 1 auto; justify-content: center; }
}

/* ---- Confirm modal custom ---- */
.modal--confirm{ max-width: 420px; }
/* A confirmação fica ACIMA de qualquer outra janela. Ela nasceu quando só
   havia uma janela por vez; com o histórico, a pergunta "tirar esta leitura?"
   passou a ser feita de DENTRO de outra janela — e no mesmo plano ela abria
   por baixo da lista, que engolia o clique. A caixa que faz a pergunta é, por
   definição, a última coisa da pilha: nada pode ser respondido antes dela. */
#confirm-modal{ z-index: 220; }
.confirm__title{
  font-family: var(--font-display);
  font-size: var(--fs-xl); color: var(--primary);
  margin-bottom: 10px; letter-spacing: -0.01em;
}
.confirm__text{
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.55;
  margin: 0 0 24px;
}
.confirm__actions{
  display: flex; justify-content: flex-end; gap: 12px;
}

/* ---- Editar os pratos do cardápio ----
   A lista é o cardápio inteiro numa coluna rolável: em cardápio de 40+
   pratos, paginar seria obrigar o dono a caçar o prato que ele quer
   mexer. Nome e preço no mesmo grid pra ele varrer a coluna de preço com
   o olho — que é como ele lê o cardápio dele no papel. */
.modal--menu-edit{ max-width: 620px; }
.modal__lead{ color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; margin: 0; }
.modal__actions{ display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.menu-edit__list{
  display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh; overflow-y: auto;
  padding: 2px; margin: 0 -2px;
}
.menu-edit__row{
  display: grid; grid-template-columns: 1fr 108px 32px; align-items: center; gap: 8px;
}
.menu-edit__name, .menu-edit__price{
  font: inherit; font-size: var(--fs-md); color: var(--ink);
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px 10px; min-width: 0; width: 100%;
}
.menu-edit__price{ font-family: var(--font-mono); text-align: right; }
.menu-edit__name:focus-visible, .menu-edit__price:focus-visible{
  outline: 2px solid var(--primary); outline-offset: 1px;
}
.menu-edit__row[data-novo="1"] .menu-edit__name,
.menu-edit__row[data-novo="1"] .menu-edit__price{ border-color: var(--primary-30, var(--primary-15)); }
.menu-edit__del{
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); color: var(--muted); background: none; border: none; cursor: pointer;
  font-size: var(--fs-lg); line-height: 1;
}
.menu-edit__del:hover{ background: var(--primary-08); color: var(--ink); }
.menu-edit__add{
  align-self: flex-start;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  color: var(--primary); background: none; border: 1px dashed var(--primary-30, var(--primary-15));
  border-radius: var(--r-sm); padding: 8px 12px; cursor: pointer;
}
.menu-edit__add:hover{ background: var(--primary-04); }
.menu-edit__err{ color: var(--danger); font-size: var(--fs-sm); margin: 0; }
.menu-edit__err[hidden]{ display: none; }
@media (max-width: 560px){
  .menu-edit__row{ grid-template-columns: 1fr 88px 30px; }
  .menu-edit__list{ max-height: 52vh; }
}

/* ---- Mobile ---- */
@media (max-width: 640px){
  .usermenu__name{ display: none; }
  .save-status{ display: none; }
  .save-status[data-state="error"]{ display: inline-flex; }
}

/* ===================================================================
   F5 — Painel financeiro consolidado do negócio
   Irmão visual do revenue-block (card dourado) e do semáforo de MC
   (data-tone green/yellow/red). O tom do painel inteiro segue o CMV;
   os KPIs internos têm tom próprio. Reaproveita tokens e medidas dos
   blocos existentes para manter a mesma linguagem.
   =================================================================== */
.fin-panel{
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 22px 24px 18px;
  border-left: 3px solid var(--border-strong);
}
[hidden].fin-panel{ display: none !important; }

/* Faixa de cor à esquerda segue o veredito (tom do CMV). */
.fin-panel[data-tone="green"]{ border-left-color: var(--positive); }
.fin-panel[data-tone="yellow"]{ border-left-color: var(--gold-deep); }
.fin-panel[data-tone="red"]{ border-left-color: var(--danger); }

.fin-panel__eyebrow{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 14px;
}

/* --- Veredito (manchete com cor) --- */
.fin-verdict{
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px;
}
.fin-verdict__dot{
  width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 5px;
  background: var(--border-strong);
}
.fin-panel[data-tone="green"] .fin-verdict__dot{ background: var(--positive); }
.fin-panel[data-tone="yellow"] .fin-verdict__dot{ background: var(--gold-deep); }
.fin-panel[data-tone="red"] .fin-verdict__dot{ background: var(--danger); }
.fin-verdict__txt{ flex: 1; min-width: 0; }
.fin-verdict__head{
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600;
  letter-spacing: -0.01em; margin: 0 0 4px; line-height: 1.2;
  color: var(--ink);
}
.fin-panel[data-tone="green"] .fin-verdict__head{ color: var(--positive); }
.fin-panel[data-tone="yellow"] .fin-verdict__head{ color: var(--gold-ink); }
.fin-panel[data-tone="red"] .fin-verdict__head{ color: var(--danger); }
.fin-verdict__body{
  font-size: var(--fs-md); color: var(--muted); line-height: 1.5; margin: 0;
}
.fin-verdict__body b{ color: var(--ink); font-weight: 600; }

/* --- Herói em R$ (card dourado, igual ao revenue-block) --- */
.fin-hero{
  border: 1px solid var(--gold-soft); border-radius: var(--r-md);
  background: var(--gold-paper); padding: 16px 20px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 5px;
}
.fin-hero__label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-deep);
}
.fin-hero__figure{ display: flex; align-items: baseline; gap: 6px; }
.fin-hero__value{
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 600;
  color: var(--gold-ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.fin-hero__period{ font-family: var(--font-mono); font-size: var(--fs-md); color: var(--gold-deep); }
.fin-hero__sub{ font-size: var(--fs-sm); color: var(--gold-deep); line-height: 1.45; }

/* --- KPIs com semáforo vs meta --- */
.fin-kpis{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px;
  margin-bottom: 12px;
}
.fin-kpi{
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
}
.fin-kpi__label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.fin-kpi__val{
  font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.fin-kpi__goal{ font-size: var(--fs-xs); color: var(--muted); }

.fin-kpi[data-tone="green"]{ background: var(--positive-bg); border-color: var(--positive-25); }
.fin-kpi[data-tone="green"] .fin-kpi__val{ color: var(--positive); }
.fin-kpi[data-tone="yellow"]{ background: var(--gold-10); border-color: var(--gold-30); }
.fin-kpi[data-tone="yellow"] .fin-kpi__val{ color: var(--gold-ink); }
.fin-kpi[data-tone="red"]{ background: var(--danger-bg); border-color: var(--danger-25); }
.fin-kpi[data-tone="red"] .fin-kpi__val{ color: var(--danger); }

/* --- Prime Cost: linha de convite quando falta a folha --- */
.fin-prime-note{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
  margin: 0 0 12px; padding: 10px 12px;
  background: var(--primary-04); border-radius: var(--r-sm);
}
.fin-prime-note[hidden]{ display: none !important; }
.fin-prime-note b{ color: var(--ink); font-weight: 600; }

/* Faixa do formato da casa dentro do convite do Prime Cost. Bloco próprio, com
   filete à esquerda, porque é REFERÊNCIA de fora e não o número desta casa —
   as duas coisas na mesma linha corrida ficariam indistinguíveis. */
.fin-prime-note__regua{
  display: block; margin-top: 8px; padding-left: 10px;
  border-left: 2px solid var(--primary-15);
}
.fin-prime-note__ressalva{ display: block; margin-top: 4px; font-size: 0.94em; opacity: 0.85; }

/* --- Escala de trabalho: o que a mudança faz com a folha desta casa ---
   Encostado no Prime Cost de propósito: é a outra metade dele, não um assunto
   novo. Moldura discreta (não é alarme) com os três números em fila. */
.fin-scale{
  margin: 0 0 14px; padding: 13px 15px;
  border: 1px solid var(--border); border-radius: var(--r-md, 10px);
  background: var(--surface);
}
.fin-scale[hidden]{ display: none !important; }
.fin-scale__head{ display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.fin-scale__eyebrow{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.fin-scale__title{
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600;
  color: var(--ink); margin: 0; letter-spacing: -0.01em;
}
.fin-scale__lede, .fin-scale__ask, .fin-scale__money, .fin-scale__out{
  font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; margin: 0 0 8px;
}
.fin-scale__lede{ color: var(--muted); }
.fin-scale__ask{ padding: 9px 11px; background: var(--primary-04); border-radius: var(--r-sm); }
.fin-scale__out{ color: var(--muted); }
.fin-scale__money b, .fin-scale__ask b, .fin-scale__lede b{ color: var(--ink); font-weight: 600; }

.fin-scale__tiles{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px;
}
.fin-scale__tile{
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--paper);
}
.fin-scale__tile-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.fin-scale__tile-val{
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.fin-scale__tile-foot{ font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.fin-scale__tile[data-tone="green"]{ background: var(--positive-bg); border-color: var(--positive-25); }
.fin-scale__tile[data-tone="green"] .fin-scale__tile-val{ color: var(--positive); }
.fin-scale__tile[data-tone="yellow"]{ background: var(--gold-10); border-color: var(--gold-30); }
.fin-scale__tile[data-tone="yellow"] .fin-scale__tile-val{ color: var(--gold-ink); }
.fin-scale__tile[data-tone="red"]{ background: var(--danger-bg); border-color: var(--danger-25); }
.fin-scale__tile[data-tone="red"] .fin-scale__tile-val{ color: var(--danger); }

/* O compensador: de onde tirar o que a escala custa. Fundo levemente distinto
   porque é a virada do bloco — para de medir o problema e passa a apontar a
   saída. Os três pratos vêm em lista, não em tabela: é leitura de decisão. */
.fin-scale__comp{
  margin: 0 0 10px; padding: 11px 13px;
  border-radius: var(--r-sm); background: var(--primary-04);
}
.fin-scale__comp-head{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 6px;
}
.fin-scale__comp-txt{ font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; margin: 0 0 9px; }
.fin-scale__comp-txt b{ font-weight: 600; }
.fin-scale__comp-list{ list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fin-scale__comp-item{
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.fin-scale__comp-item:last-child{ border-bottom: none; padding-bottom: 0; }
/* Posição explícita nas três células: nome em cima, movimento embaixo, ganho
   à direita ocupando as duas linhas. Sem isso o navegador acomoda o item de
   duas linhas primeiro e o nome cai na coluna da direita. */
.fin-scale__comp-name{
  grid-column: 1; grid-row: 1;
  font-size: var(--fs-sm); color: var(--ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-scale__comp-move{
  grid-column: 1; grid-row: 2;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fin-scale__comp-gain{
  grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--positive);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.fin-scale__comp-move em{ font-style: normal; }
.fin-scale__comp-more{ font-size: var(--fs-xs); color: var(--muted); margin: 0 0 8px; }
.fin-scale__comp-foot{ font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; margin: 0; }

.fin-scale__note{
  font-size: var(--fs-xs); color: var(--muted); font-style: italic; line-height: 1.45;
  border-top: 1px solid var(--border); padding-top: 9px; margin: 0;
}

/* --- Contribuição das bebidas: alavanca de margem separada do prato --- */
.fin-drinks{
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px; margin: 0 0 14px;
  border: 1px solid rgba(47,107,79,0.22); border-radius: var(--r-md, 10px);
  background: var(--positive-bg);
}
.fin-drinks[hidden]{ display: none !important; }
.fin-drinks__ico{ flex: none; color: var(--positive); margin-top: 1px; line-height: 0; }
.fin-drinks__txt{ font-size: var(--fs-sm); color: var(--ink); line-height: 1.5; }
.fin-drinks__txt b{ font-weight: 600; }
.fin-drinks__cov{ color: var(--muted); }
/* Modo convite (sem bebida completa): tom neutro, não verde de "saudável". */
.fin-drinks[data-mode="invite"]{
  border-color: var(--border); background: var(--surface);
}
.fin-drinks[data-mode="invite"] .fin-drinks__ico{ color: var(--muted); }

/* --- Cobertura honesta --- */
.fin-coverage{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin: 0 0 14px;
}
.fin-coverage[hidden]{ display: none !important; }
.fin-coverage b{ color: var(--ink); font-weight: 600; }

/* Atalho inline (abre metas / vai pro 1º item sem custo) */
.fin-link{
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.fin-link:hover{ color: #A8893F; }
.fin-link:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* --- Metas: barra colapsada + editor --- */
.fin-goals{
  border-top: 1px solid var(--border); padding-top: 14px; margin-top: 2px;
}
.fin-goals__bar{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.fin-goals__summary{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.fin-goals__label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.fin-goals__vals{ font-size: var(--fs-sm); color: var(--ink); font-variant-numeric: tabular-nums; }
.fin-goals__toggle{
  flex: none; border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-sm); padding: 4px 12px; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--primary-60);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.fin-goals__toggle:hover{ border-color: var(--border-strong); color: var(--ink); }

.fin-goals__editor{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px;
  margin-top: 14px;
}
.fin-goals__editor[hidden]{ display: none !important; }

.fin-field{ display: flex; flex-direction: column; gap: 5px; }
.fin-field__label{
  font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: center; gap: 6px;
}
.fin-field__opt{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--border-strong);
  border: 1px solid var(--border); border-radius: 2px; padding: 1px 4px;
}
/* Input fantasma com wrapper — mesmo idiom do costgrid (nada nativo cru). */
.fin-field__wrap{
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); padding: 8px 11px;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.fin-field__wrap:hover{ border-color: var(--border); }
.fin-field__wrap:focus-within{ border-color: var(--primary); background: var(--paper); }
.fin-field__prefix, .fin-field__suffix{
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); flex: none;
}
.fin-field__input{
  border: none; background: transparent; outline: none;
  font-family: var(--font-mono); font-size: var(--fs-md); color: var(--ink);
  width: 100%; min-width: 0; font-variant-numeric: tabular-nums; padding: 0;
}
.fin-field__input--rev{ text-align: left; }
/* Select dentro da moldura de campo: some com a aparência nativa pra ficar
   igual aos inputs de texto ao lado (a seta nativa desalinharia a linha). */
.fin-field__input--select{
  appearance: none; -webkit-appearance: none;
  font-size: var(--fs-sm); cursor: pointer;
}

/* Linha auxiliar abaixo do campo: "Hoje: R$ 80,00", "Hoje: 2,4×/dia". Aparece
   só quando há dado para calcular — nada de NaN, nada de 0,00 fantasma. */
.fin-field__hint{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums; padding-left: 2px;
}
.fin-field__hint[hidden]{ display: none !important; }

/* Grupos extras de metas (operação / resultado): ocupam a linha inteira do
   grid de 2 colunas do editor e organizam seus próprios campos lado a lado.
   Subtítulo discreto separa visualmente sem virar header ruidoso. */
.fin-goals__group{
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px;
  padding-top: 12px; border-top: 1px dashed var(--border);
}
.fin-goals__group-title{
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}

.fin-panel__disclaimer{
  font-size: var(--fs-xs); color: var(--muted); font-style: italic; line-height: 1.45;
  border-top: 1px solid var(--border); padding-top: 12px; margin: 16px 0 0;
}

@media (max-width: 560px){
  .fin-panel{ padding: 18px 16px 16px; }
  .fin-kpis{ grid-template-columns: 1fr; }
  .fin-scale__tiles{ grid-template-columns: 1fr; }
  /* No celular o ganho embaixo, não ao lado: em duas colunas estreitas o
     movimento de preço quebra em duas linhas e enrosca no número. */
  .fin-scale__comp-item{ grid-template-columns: 1fr; gap: 2px; }
  .fin-scale__comp-name, .fin-scale__comp-move{ grid-row: auto; }
  .fin-scale__comp-gain{ grid-column: 1; grid-row: auto; text-align: left; align-self: start; }
  .fin-goals__editor{ grid-template-columns: 1fr; }
  .fin-goals__group{ grid-template-columns: 1fr; }
  .fin-verdict__head{ font-size: var(--fs-xl); }
  .fin-hero__value{ font-size: var(--fs-2xl); }
}

/* ============================================================
   EXPORTAR RELATÓRIO (PDF) — controles de tela + folha de print
   O destino real é o WhatsApp do dono: o botão "Baixar PDF" dispara
   window.print(), e a folha @media print reformata #result como um
   documento de marca, escondendo todo o cromo do app.
   ============================================================ */

/* --- Vendas históricas (Onda 2) --- */
.sales-history[hidden]{ display: none !important; }
.sales-history{
  margin: 4px 0 8px;
  padding: 24px 28px 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sales-history__head{ margin-bottom: 16px; }
.sales-history__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.sales-history__title{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em;
}
/* A linha do formato manual: existe pra quem quiser montar o arquivo, mas não
   disputa atenção com o caminho curto — trazer o relatório que o sistema da
   casa já exporta. */
.sales-history__formato{
  display: block;
  margin-top: 6px;
  font-size: 0.86em;
  color: var(--muted);
}
.sales-history__lede{
  margin: 0 0 12px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: 68ch;
}
.sales-history__lede code{
  font-family: var(--font-mono); font-size: 0.82em;
  background: var(--surface); padding: 1px 6px; border-radius: 3px;
}
.sales-history__actions{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sales-history__summary[hidden]{ display: none !important; }
.sales-history__summary{
  margin-top: 16px; padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.sales-history__summary-eyebrow{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px; display: block;
}
.sales-history__summary-title{
  font-weight: 600; color: var(--ink); font-size: var(--fs-md); margin-bottom: 6px;
}
.sales-history__summary-list{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px;
  margin-top: 10px;
}
.sales-history__summary-item{
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.sales-history__summary-item-name{
  font-size: var(--fs-sm); color: var(--ink); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sales-history__summary-item-val{
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted);
}

/* Modal de import (dropzone maior, textarea de paste) */
.modal--sales{ max-width: 640px; }
.sales-modal__paste{ margin-top: 14px; }
.sales-modal__paste-or{
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.sales-modal__textarea{ height: 130px; }
.sales-modal__error[hidden]{ display: none !important; }
.sales-modal__error{
  margin-top: 12px; padding: 10px 14px;
  background: var(--danger-bg); border: 1px solid var(--danger);
  border-radius: var(--r-sm); color: var(--danger); font-size: var(--fs-sm);
}
/* Mesma caixa, outro recado: enquanto a leitura acontece isto é ESPERA, não
   erro. Vermelho aqui faria o dono achar que já deu errado enquanto ainda
   está funcionando. */
.sales-modal__error.is-busy{
  background: var(--paper);
  border-color: var(--border);
  color: var(--muted);
}
/* A pergunta do período. NÃO usa a caixa de erro de propósito: o relatório
   está certo e o dono não errou nada — falta uma informação que só ele tem.
   Vermelho aqui ensinaria que o arquivo dele é inválido, que é o contrário do
   que a tela quer dizer. */
.sales-modal__periodo[hidden]{ display: none !important; }
.sales-modal__periodo{
  margin-top: 12px; padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  display: flex; flex-direction: column; gap: 10px;
}
.sales-modal__periodo-lede{
  font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
}
.sales-modal__periodo-campos{
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
}
.sales-modal__periodo-campo{
  display: flex; flex-direction: column; gap: 3px;
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.sales-modal__periodo-campo input{
  font-family: var(--font-text); font-size: var(--fs-md);
  padding: 7px 9px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
}
.sales-modal__periodo-erro{
  font-size: var(--fs-sm); color: var(--danger);
}
@media (max-width: 520px){
  /* O botão embaixo, inteiro: espremido ao lado de dois campos de data ele
     virava um alvo de toque de 40px num canto. */
  .sales-modal__periodo-campos{ flex-direction: column; align-items: stretch; }
  .sales-modal__periodo-campo input{ width: 100%; }
}

.sales-modal__preview[hidden]{ display: none !important; }
.sales-modal__preview{
  margin-top: 14px; padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.sales-modal__preview-head{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; gap: 12px;
}
.sales-modal__preview-title{ font-weight: 600; color: var(--ink); font-size: var(--fs-md); }
.sales-modal__preview-note{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}
.sales-modal__preview-table{
  display: flex; flex-direction: column; gap: 4px;
  max-height: 220px; overflow-y: auto;
}
.sales-modal__preview-row{
  display: grid; grid-template-columns: minmax(0, 1.4fr) 90px 100px minmax(0, 1.2fr);
  gap: 10px; align-items: center;
  padding: 6px 8px; background: var(--paper);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.sales-modal__preview-row-name{ font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-modal__preview-row-num{ font-family: var(--font-mono); text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.sales-modal__preview-row-match{ font-size: var(--fs-sm); color: var(--positive); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-modal__preview-row-match--none{ color: var(--danger); font-style: italic; }
.sales-modal__foot{
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Chip "de vendas" quando o volume/sem vem da série. Reaproveita o padrão
   dos chips existentes (accent-soft + border). */
.sales-source-chip{
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink);
}

@media (max-width: 560px){
  .sales-history{ padding: 20px 18px; }
  .sales-modal__preview-row{ grid-template-columns: minmax(0, 1fr) 60px; }
  .sales-modal__preview-row-num--rev{ display: none; }
  .sales-modal__preview-row-match{ grid-column: 1 / -1; }
}

/* --- Chip "Nova versão · recarregar" (aviso de SW novo em waiting) --- */
.sw-update-chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.sw-update-chip:hover{ background: var(--accent); color: #fff; }
.sw-update-chip:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.sw-update-chip__dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.4s var(--ease) infinite;
}
.sw-update-chip:hover .sw-update-chip__dot{ background: #fff; }
@media (max-width: 560px){
  .sw-update-chip{ padding: 8px 12px; min-height: 40px; }
}

/* --- Onboarding tour (3 balões pós-primeira-análise) --- */
.tour[hidden]{ display: none !important; }
/* A CAMADA DE CADA PEÇA DO PASSEIO, DECLARADA UMA POR UMA.

   O passeio tinha UMA camada só — a moldura, em 300 — e o anel de destaque do
   elemento apontado tinha 305, mais alta. Como o anel vive FORA da moldura, a
   seção destacada subia acima do balão inteiro; onde os dois se encostavam,
   quem recebia o toque era a seção, não o botão. No passo 2 de 3 o balão pousa
   exatamente em cima da grade de custos que ele está apontando, e o "Entendi"
   parava de responder: o passeio travava no meio, e a tela ficava presa atrás
   do escurecido com o "Pular" como única saída.

   Subir o balão sozinho não resolve, e é a armadilha aqui: um elemento
   `position: fixed` abre camada própria mesmo sem z-index, então qualquer
   número dado ao balão fica preso DENTRO da moldura e continua valendo a
   camada dela lá fora. Por isso a moldura deixa de ser camada (não posiciona
   mais nada) e as duas peças sobem sozinhas, cada uma fixa e com o seu número:
   escurecido embaixo (300), o elemento apontado no meio (305 — é o que o faz
   brilhar por cima do escuro) e o balão por cima de tudo (310). Essa é a ordem
   que a pessoa enxerga, e agora é também a ordem em que o toque chega. */
.tour{
  position: static;
  pointer-events: none;
}
.tour__backdrop{
  position: fixed; inset: 0; z-index: 300;
  background: rgba(26,43,60,0.28);
  pointer-events: auto;
  transition: opacity .18s var(--ease);
}
/* `fixed` e não `absolute`: a moldura não posiciona mais nada, e as
   coordenadas que o JS escreve aqui já são as da janela (saem de
   getBoundingClientRect em tourReposition) — a conta é a mesma. */
.tour__card{
  position: fixed; z-index: 310;
  min-width: 260px;
  max-width: 340px;
  padding: 18px 20px 16px;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 20px 48px -18px rgba(26,43,60,0.35), 0 4px 12px -4px rgba(26,43,60,0.2);
  pointer-events: auto;
  /* Posicionado por JS via top/left. */
}
.tour__pointer{
  position: absolute;
  width: 14px; height: 14px;
  background: var(--paper);
  border-left: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
  transform: rotate(45deg);
}
.tour__pointer[data-side="top"]{ top: -8px; left: 24px; }
.tour__pointer[data-side="bottom"]{ bottom: -8px; left: 24px; transform: rotate(225deg); }
.tour__pointer[data-side="left"]{ left: -8px; top: 24px; transform: rotate(-45deg); }
.tour__pointer[data-side="right"]{ right: -8px; top: 24px; transform: rotate(135deg); }
.tour__step{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 6px;
}
.tour__title{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--ink); margin: 0 0 6px; letter-spacing: -0.01em;
}
.tour__body{
  color: var(--muted); font-size: var(--fs-md); line-height: 1.5; margin: 0 0 14px;
}
.tour__actions{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour__skip{
  background: transparent; border: none; color: var(--muted);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 8px 4px; cursor: pointer;
  transition: color .18s var(--ease);
}
.tour__skip:hover{ color: var(--ink); }
.tour__next{
  background: var(--primary); color: var(--paper);
  border: none; border-radius: var(--r-sm);
  padding: 10px 16px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  cursor: pointer;
  transition: background .18s var(--ease);
}
.tour__next:hover{ background: #14222F; }
.tour__skip:focus-visible, .tour__next:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px;
}
@media (max-width: 560px){
  .tour__card{ max-width: calc(100vw - 32px); }
}
/* Anel de destaque no elemento apontado. */
.tour-target{
  position: relative;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px rgba(201,169,97,0.28) !important;
  border-radius: var(--r-md);
  z-index: 305;
  transition: box-shadow .18s var(--ease);
}

/* --- Progresso de perfil (custos, volumes, metas) --- */
/* A faixa .report-progress saiu: os chips viraram o andar 4 do #report-lede
   e herdaram a moldura dele. Sobraram só os estilos dos chips. */
.report-progress__chips{
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.report-progress__chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.report-progress__chip:hover{ background: var(--primary-04); border-color: var(--primary-15); }
.report-progress__chip:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.report-progress__chip.is-complete{
  background: var(--positive-bg); border-color: var(--positive-25);
  color: var(--positive); cursor: default;
}
.report-progress__chip-label{ font-weight: 500; }
.report-progress__chip-count{
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted);
}
.report-progress__chip.is-complete .report-progress__chip-count{ color: var(--positive); }
.report-progress__chip-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}
.report-progress__chip.is-complete .report-progress__chip-dot{ background: var(--positive); }
@media (max-width: 560px){
  .report-progress__chip{ min-height: 40px; padding: 8px 12px; }
}

/* --- Sticky nav do relatório --- */
/* GRUDAVA EM 0 E SUMIA. O cabeçalho da página também gruda em 0, tem z-index
   40 e 94px de altura — então o sumário do relatório encostava e desaparecia
   inteiro por baixo dele. O efeito no uso: os ~7.000px de relatório rolavam
   sem nenhum sumário na tela, e a barra só existia enquanto ainda estava no
   fluxo. Agora ela para ONDE a faixa do topo termina. */
.report-nav[hidden]{ display: none !important; }
.report-nav{
  position: sticky;
  top: var(--h-nav);
  z-index: 30;
  margin: 16px 0 24px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* AGORA QUE ELE GRUDA DE VERDADE, PRECISA PARECER QUE FLUTUA.
     Enquanto não grudava, a sombra fraca não fazia diferença. Grudando, ele
     tem a mesma roupa dos cartões do relatório (papel, borda fina, canto
     arredondado) — e um cartão com conteúdo passando por baixo não lê como
     camada, lê como tela quebrada: o que se vê é meia linha de texto e meio
     chip aparecendo na borda de baixo. A sombra é o que diz "isto está por
     cima". */
  box-shadow:
    0 1px 0 var(--border),
    0 10px 20px -12px rgba(26,43,60,0.20),
    0 2px 6px -3px rgba(26,43,60,0.10);
}
/* A SAIA. Logo abaixo da barra, o conteúdo que passa por baixo era cortado no
   fio — meia caixa, meia palavra, canto arredondado decepado. Esta faixa curta
   dissolve esses restos no papel em vez de guilhotiná-los. Não cobre leitura:
   são 12px, e o que estiver inteiro abaixo dela continua inteiro. */
.report-nav::after{
  content: "";
  position: absolute; left: -1px; right: -1px; top: 100%;
  height: 12px;
  background: linear-gradient(to bottom, var(--paper), rgba(251,248,242,0));
  pointer-events: none;
}
.report-nav__inner{
  display: flex; align-items: center; gap: 4px;
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.report-nav__inner::-webkit-scrollbar{ display: none; }
.report-nav__link{
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.report-nav__link:hover{ background: var(--primary-04); color: var(--ink); }
.report-nav__link.is-active{ background: var(--primary); color: var(--paper); }
.report-nav__link[hidden]{ display: none !important; }
.report-nav__link:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 560px){
  .report-nav{ margin: 12px 0 20px; border-radius: var(--r-sm); }
  .report-nav__link{ padding: 12px 14px; }
}

/* --- Controles na tela (botão + campo de nome da casa) --- */
.report__actions{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* O "···" com as ações de menor frequência (ver montarMenuDoRelatorio). */
.report__mais{ position: relative; }
.report__mais-sum{ list-style: none; cursor: pointer; padding-left: 12px; padding-right: 12px; font-size: var(--fs-md); letter-spacing: 0.1em; }
.report__mais-sum::-webkit-details-marker{ display: none; }
.report__mais-lista{
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 220px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
}
.report__mais-lista .report__export{ border: 0; background: none; width: 100%; justify-content: flex-start; border-radius: var(--r-sm); text-transform: none; letter-spacing: 0; font-family: var(--font-text); font-size: var(--fs-sm); }
.report__mais-lista .report__export:hover{ background: var(--primary-04); }
@media (max-width: 720px){
  .report__mais-lista{ right: auto; left: 0; }
  /* Com dois botões e o "···" a fita não precisa rolar — e rolagem (overflow)
     cortaria o menu aberto. */
  .report__actions{ overflow: visible !important; flex-wrap: wrap !important; }
}
.report__export{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--primary);
  background: var(--paper); border: 1px solid var(--border-strong);
  border-radius: 7px; padding: 8px 13px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.report__export:hover{ background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.report__export svg{ flex: none; }
/* `display: inline-flex` na classe vence o `display:none` que o navegador dá
   ao atributo [hidden] — então TODO botão desta barra que o app mandasse
   esconder continuava na tela. Não era teórico: "Enviar ajustes" nasce
   escondido e só devia acender com sugestão de preço na mão; sem esta regra
   ele aparecia em todo relatório, e clicá-lo sem sugestão não fazia nada.
   Botão morto na barra de um relatório de consultoria custa credibilidade. */
.report__export[hidden]{ display: none; }

/* NO CELULAR A BARRA DE AÇÕES VIRA FITA, EM VEZ DE ESCADA.
   Com `flex-wrap: wrap` os sete botões desciam em cinco linhas de larguras
   diferentes — dois largos, depois dois, depois um — e comiam mais de meia
   tela antes dos números do relatório. Além de feio, é escada: o olho tem
   que recomeçar a cada linha. Em fita, uma linha só, e o que não coube está
   a um arrasto do polegar. Nenhuma ação é escondida. */
@media (max-width: 720px){
  .report__actions{
    flex-wrap: nowrap;
    /* A LARGURA PRECISA SER DITA. Sem ela, `nowrap` faz a barra medir a soma
       dos sete botões (871px num aparelho de 390px) e, como o cabeçalho do
       relatório é uma coluna com `align-items: flex-start`, a barra estourava
       o cartão e levava junto o bloco de identificação e os números do topo.
       Com `width: 100%` a fita mede o cartão, e o que não cabe rola dentro
       dela — que é o comportamento pretendido. */
    width: 100%; min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    padding: 2px 0;
  }
  .report__actions::-webkit-scrollbar{ display: none; }
  .report__export{ flex: 0 0 auto; }
}

/* --- Painel de assinatura de email (abre pelo botão "Receber por email") --- */
.email-panel{
  margin: 14px 0 18px; padding: 16px 18px;
  background: var(--paper); border: 1px solid var(--border-strong);
  border-radius: 8px; max-width: 520px;
  display: flex; flex-direction: column; gap: 12px;
}
/* O painel nasce fechado e é o botão "Receber por email" que o abre — mas o
   display: flex acima vencia o hidden do HTML, então ele estava sempre aberto
   no meio do relatório e o × não fechava nada. */
.email-panel[hidden]{ display: none; }
.email-panel__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.email-panel__title{ font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.email-panel__sub{ font-size: var(--fs-md); color: var(--muted); margin-top: 4px; line-height: 1.4; }
.email-panel__close{
  background: transparent; border: none; color: var(--muted);
  font-size: var(--fs-xl); line-height: 1; cursor: pointer; padding: 0 4px;
}
.email-panel__close:hover{ color: var(--ink); }
.email-panel__toggle{ display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--ink); cursor: pointer; }
.email-panel__toggle input{ transform: scale(1.1); accent-color: var(--accent); cursor: pointer; }
.email-panel__toggle b{ font-weight: 500; }
.email-panel__row{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.email-panel__send{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--primary); background: transparent; border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 6px 10px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.email-panel__send:hover{ background: var(--accent-soft); border-color: var(--accent); }
.email-panel__send:disabled{ opacity: 0.5; cursor: default; }
.email-panel__msg{ font-size: var(--fs-sm); color: var(--muted); }
.email-panel__msg[data-tone="ok"]{ color: #2e7d32; }
.email-panel__msg[data-tone="err"]{ color: #c62828; }
.report__resto-input{
  margin-top: 8px; width: 100%; max-width: 340px;
  font-family: var(--font-serif, inherit); font-size: var(--fs-md); color: var(--ink);
  background: transparent; border: none; border-bottom: 1px dashed var(--border-strong);
  padding: 3px 1px 4px; outline: none;
}
.report__resto-input::placeholder{ color: var(--muted); font-style: italic; }
.report__resto-input:focus{ border-bottom-color: var(--accent); }

/* Cabeçalho/rodapé de DOCUMENTO: existem no DOM mas só aparecem no PDF.
   Opt-in (nascem display:none) pra não piscar na tela antes do CSS aplicar. */
.print-only{ display: none; }

/* --- Folha de impressão / PDF ---
   O PDF é peça de venda: capa solo de marca, tabela consolidada de sugestões
   em página própria, cabeçalho tipográfico de seção e numeração no rodapé.
   Tudo o que sai do fluxo da tela mora em blocos .print-only — a folha aqui
   só revela esses blocos e empurra cada macro-seção pra uma página nova. */
@media print {
  /* A4 com margens generosas de documento de consultoria. Numeração da
     página no canto inferior direito a partir da página 2 (capa fica limpa,
     sem número). Os margin boxes @top-left, @top-right e @bottom-left são
     preenchidos em runtime por preparePrintMeta() (nome da casa dinâmico +
     data da consulta) — a regra @page sobrescrita no <head> herda esta
     numeração. Capa zera todos os margin boxes via :first. */
  @page{
    size: A4; margin: 18mm 16mm 18mm 16mm;
    @bottom-right{
      content: counter(page);
      font-family: var(--font-mono); font-size: 8pt; color: #6a6a6a;
    }
  }
  @page:first{
    @top-left{ content: ''; }
    @top-right{ content: ''; }
    @bottom-left{ content: ''; }
    @bottom-right{ content: ''; }
  }

  /* Whitelist: esconde TUDO e libera só o relatório e seus filhos. Robusto —
     qualquer bloco novo do app nunca vaza pro PDF (ao contrário de caçar
     display:none em cada navbar/botão). */
  body * { visibility: hidden; }
  #result, #result * { visibility: visible; }
  /* visibility preserva o espaço; absolute traz o relatório pro topo da folha. */
  #result{ position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; }

  /* Cores e fundos: o browser remove backgrounds por padrão — sem isto, matriz,
     painel e badges viram branco e perdem sentido. */
  *{ -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Fundo do app fora; relatório em papel branco, tema claro sempre. O `app-body`
     e o `.app-main` carregam o creme do tema na tela (--surface, --paper); no PDF
     o papel é branco puro, senão a peça vira "ilha bege" dentro da folha A4. A
     borda do `<article class="report">` também sai — no papel, ela vira "moldura
     de print", o oposto de documento solto na folha. */
  html, body, .app-body, .app-main, #result, .report{ background: #fff !important; }
  .report{ border: none !important; box-shadow: none !important; padding: 0 !important; }

  /* Cromo do app e controles do relatório NÃO entram no PDF. */
  .no-print, .report__export, .report__resto-input,
  .report__chips, .demo-flag, .result__staleflag, .proxy-note,
  #new-analysis-btn, .report__head{ display: none !important; }

  /* O tamanho da base FICA no PDF — é a peça que o dono manda pra sócio e pra
     investidor, e é justamente ali que "comparamos com o mercado" precisa vir
     com o número junto. Sai a moldura da barra (que na tela agrupa controles
     que o papel não tem) e sai o botão, que em papel é tinta morta. */
  .scopebar{
    border: none !important; background: none !important;
    padding: 0 !important; margin: 0 0 14px !important;
  }
  .basestrip__more{ display: none !important; }
  .basestrip{ border-bottom: none !important; padding-bottom: 0 !important; }

  /* A abertura (3 números) vira a primeira página de CONTEÚDO, sozinha:
     ela é a leitura executiva que o dono fotografa. Empurra o resto com
     page-break-after. break-inside já está coberto pela regra ampla mais
     abaixo. */
  .summary-block{
    page-break-after: always; break-after: page;
    margin: 0 !important;
    /* Centro vertical na folha A4: ocupa altura útil pra os 3 números
       respirarem como "página 2" executiva. */
    min-height: 240mm;
    display: flex !important; flex-direction: column;
    justify-content: center;
  }
  .summary-block__grid{ gap: 16px; }
  .summary-card{
    padding: 22px 22px !important;
    min-height: 0;
    /* Sem cor de superfície na impressão: papel branco; mantém só a borda
       e a cor âmbar do card de oportunidade que CARREGA o tom. */
    background: #fff !important;
  }
  .summary-card--opp{
    background: var(--gold-paper) !important;
    border-color: var(--gold-soft) !important;
  }
  .summary-card__num{
    /* Em A4 o clamp do desktop ficaria gigante e quebraria — fixo em pt. */
    font-size: 30pt !important;
    line-height: 1.05 !important;
  }
  .summary-card__verb{ font-size: 8pt !important; }
  .summary-card__sub{ font-size: 8.5pt !important; }
  .summary-card__invite{ font-size: 8.5pt !important; }
  .summary-action-item{ font-size: 10pt !important; }
  .summary-action-tag{ font-size: 7.5pt !important; }

  /* Revela os elementos de documento só agora. */
  .print-only{ display: block !important; }
  /* O `hidden` do HTML é mais forte que display:block — respeita o JS quando
     decide ocultar a seção de sugestões num caso sem recomendações. */
  .print-only[hidden]{ display: none !important; }

  /* ===== CAPA — documento de consultoria, alinhada à esquerda ===== */
  .pdf-cover{
    page-break-after: always; break-after: page;
    min-height: 245mm; display: flex !important; flex-direction: column;
    justify-content: flex-start; padding: 0; margin: 0;
    /* Âncora da marca d'água do salão, que é posicionada em relação à capa. */
    position: relative;
    overflow: hidden;
  }
  .pdf-cover__top{
    display: flex !important; align-items: center; gap: 10px;
    margin-bottom: 0;
  }
  .pdf-cover__mark{ display: inline-flex; color: var(--primary); }
  /* A marca da casa é imagem impressa: precisa sair com a tinta que o dono
     subiu, e não na versão lavada que alguns motores aplicam por economia. */
  .pdf-cover__marca{ display: block !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pdf-cover__marca[hidden]{ display: none !important; }
  .pdf-cover__mark svg{ width: 26px; height: 26px; }
  .pdf-cover__brand{
    font-family: var(--font-display, Georgia, serif); font-size: 14pt;
    font-weight: 600; color: var(--primary); letter-spacing: 0.005em;
  }
  /* A marca Match Sous na capa: a linha por máscara, como no app. */
  html[data-tema="match"] .pdf-cover__mark{ display: none !important; }
  html[data-tema="match"] .pdf-cover__brand{
    display: inline-block; width: 150px; height: 27px; font-size: 0; color: transparent;
    background: var(--ink);
    -webkit-mask: url(/brand/matchsous-linha.svg) no-repeat left center / contain;
    mask: url(/brand/matchsous-linha.svg) no-repeat left center / contain;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Bloco principal: o nome do restaurante é o herói. Posicionado em torno
     da regra do terço inferior (~58% da altura útil), não centro óptico. */
  .pdf-cover__body{
    margin-top: 95mm;
  }
  .pdf-cover__eyebrow{
    font-family: var(--font-mono); font-size: 9pt; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 14px;
  }
  .pdf-cover__resto{
    font-family: var(--font-display, Georgia, serif); font-weight: 600;
    font-size: 46pt; line-height: 1.06; color: var(--ink);
    margin: 0 0 8px; letter-spacing: -0.01em;
    /* Quebra natural em nomes longos sem virar hyphenation feia. */
    overflow-wrap: break-word;
  }
  /* Endereçamento da casa: bairro · cidade. Mono uppercase ecoa o eyebrow e
     funciona como "etiqueta de localização" — pertence ao h1 do destinatário,
     não ao .pdf-cover__meta (que descreve a consulta). Hidden por padrão; JS
     remove o hidden quando o user preencheu o input. */
  .pdf-cover__locale{
    font-family: var(--font-mono); font-size: 11pt; font-weight: 400;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
    margin: 0 0 14px;
  }
  .pdf-cover__locale[hidden]{ display: none; }
  .pdf-cover__meta{
    font-family: var(--font-text, Inter, system-ui, sans-serif);
    font-size: 11pt; color: var(--muted); line-height: 1.5; max-width: 130mm;
  }
  /* Rodapé da capa: procedência + faixa-índice + assinatura, empurrados
     pra baixo com margin-top auto. */
  .pdf-cover__foot{
    margin-top: auto; padding-top: 24mm;
  }
  .pdf-cover__base{
    font-family: var(--font-mono); font-size: 8.5pt; color: var(--muted);
    letter-spacing: 0.02em; margin-bottom: 14px;
  }
  .pdf-cover__index{
    border-top: 1px solid var(--border-strong);
    padding-top: 10px; margin-bottom: 14px;
  }
  .pdf-cover__index ol{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 0 18px;
    font-family: var(--font-mono); font-size: 8pt;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
    counter-reset: pdf-idx;
  }
  .pdf-cover__index li{
    display: inline-flex; align-items: baseline; gap: 6px;
    counter-increment: pdf-idx;
  }
  .pdf-cover__index li[hidden]{ display: none; }
  .pdf-cover__index li::before{
    content: counter(pdf-idx, decimal-leading-zero);
    color: var(--muted); font-weight: 500;
  }
  /* Assinatura genérica (modo padrão, sem nome da casa): 1 linha, o estilo
     antigo. .pdf-cover__sig-tech fica hidden e o main herda o estilo. */
  .pdf-cover__sig{
    font-family: var(--font-mono); font-size: 7.5pt; color: var(--muted);
    letter-spacing: 0.04em; text-transform: uppercase;
  }
  /* Modo dedicado (com nome da casa): a linha principal vira a dedicatória,
     com case preservado (o nome do restaurante pode ser caixa baixa, mista
     etc. — uppercase forçado em nome próprio fica ruim). Selo técnico em
     linha abaixo, menor e mais opaco. */
  .pdf-cover__sig--dedicated .pdf-cover__sig-main{
    font-family: var(--font-mono); font-size: 8pt; color: var(--ink);
    opacity: 0.78; letter-spacing: 0.04em; text-transform: none;
    max-width: 140mm; overflow-wrap: break-word;
  }
  .pdf-cover__sig--dedicated .pdf-cover__sig-main strong{
    font-weight: 500;
  }
  .pdf-cover__sig--dedicated .pdf-cover__sig-tech{
    font-family: var(--font-mono); font-size: 7pt; color: var(--muted);
    letter-spacing: 0.04em; text-transform: uppercase;
    margin-top: 4px; opacity: 0.6;
  }
  .pdf-cover__sig-tech[hidden]{ display: none; }

  /* ===== Cabeçalho tipográfico de seção do PDF (sugestões) ===== */
  .pdf-section__head{
    margin: 0 0 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .pdf-section__eyebrow{
    display: block;
    font-family: var(--font-mono); font-size: 8pt; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
  }
  .pdf-section__title{
    font-family: var(--font-display, Georgia, serif); font-weight: 600;
    font-size: 22pt; line-height: 1.1; color: var(--ink); margin: 0;
  }
  .pdf-section__lede{
    font-family: var(--font-text, Inter, system-ui, sans-serif);
    font-size: 10pt; color: var(--muted); line-height: 1.5;
    margin: 8px 0 0; max-width: 150mm;
  }
  .pdf-section__foot{
    margin-top: 18px;
    font-family: var(--font-mono); font-size: 7.5pt; color: var(--muted);
    letter-spacing: 0.02em; line-height: 1.55; max-width: 160mm;
  }

  /* ===== O PDF é documento, não tela de trabalho =====
     Duas coisas vazavam pro impresso: a seção de subir planilha de vendas —
     que em papel é um botão que ninguém clica — e a grade de custos inteira,
     com instrução de digitação, botões e os valores dentro de caixinhas de
     input. A planilha sai; a grade FICA, porque o conteúdo dela é dado de
     consultoria (item · preço · custo · minutos de cozinha · margem). O que
     sai da grade é a moldura de digitar. */
  #sales-history, .sales-hint{ display: none !important; }
  .costgrid__lede,
  .costgrid__reprice-wrap,
  .costgrid__rate-note,
  .costgrid__estimate,
  .costgrid__progress,
  .costgrid__rate-help{ display: none !important; }
  /* Valores sem caixa: no papel a borda de input só sugere que dá pra
     escrever ali. O número fica, a caixinha some. */
  .costgrid__cost-wrap,
  .costgrid__input,
  .costgrid__min-input{
    border: none !important; background: none !important;
    box-shadow: none !important; padding: 0 !important;
    -webkit-appearance: none; appearance: none;
  }
  /* O input tem largura fixa pra alinhar na digitação e abre um vão entre o
     "R$" e o número no papel. Encolher pra `auto` desalinha a coluna inteira
     (o grid reflui), então o ajuste é só apertar a largura. */
  .costgrid__input{ width: 52px !important; }
  /* Toggle "é bebida": controle de tela puro. No papel é um ícone mudo. */
  .drink-toggle{ display: none !important; }
  .costgrid__print-rate{
    margin: 10px 0 0;
    font-family: var(--font-mono); font-size: 7.5pt; color: var(--muted);
    line-height: 1.5;
  }

  /* ===== Tabela de recomendação — página própria no PDF =====
     Herdou o lugar da antiga .pdf-suggestions (removida: o documento saía com
     duas tabelas das mesmas sugestões). É a peça de ação do relatório, então
     abre página e fecha página. */
  .reco-table{
    page-break-before: always; break-before: page;
    page-break-after: always; break-after: page;
  }
  .pdf-table{
    width: 100%; border-collapse: collapse; margin-top: 4px;
    font-family: var(--font-text, Inter, system-ui, sans-serif);
    font-size: 10pt;
  }
  .pdf-table__th{
    text-align: left; padding: 10px 10px 8px;
    font-family: var(--font-mono); font-size: 7.5pt;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
    font-weight: 500; border-bottom: 1px solid var(--border-strong);
  }
  .pdf-table__th--num{ text-align: right; font-variant-numeric: tabular-nums; }
  .pdf-table__td{
    padding: 11px 10px; border-bottom: 1px solid var(--border);
    color: var(--ink); vertical-align: top;
  }
  .pdf-table__td--name{ font-weight: 500; }
  .pdf-table__td--num{ text-align: right; font-variant-numeric: tabular-nums; }
  .pdf-table__td--strong{ font-weight: 600; color: var(--ink); }
  .pdf-table__td--delta{ color: var(--accent, var(--primary)); }
  /* Esconde a coluna de impacto quando o header for marcado hidden. */
  .pdf-table__th--impact[hidden]{ display: none; }

  /* ===== QUEBRAS DE PÁGINA entre macro-seções ===== */
  /* Cada macro-seção começa em página nova. O resumo executivo é a primeira
     página de conteúdo após a capa (não tem page-break-before — herda da capa). */
  #portfolio-block, #fin-panel, #matrix-section, #revenue-block, #priority-section{
    page-break-before: always; break-before: page;
  }

  /* No PDF, o SVG é melhor que a lista (gráfico não corta como item-a-item).
     Mostra o SVG e esconde a lista — invertendo o que a tela mobile faz. */
  #priority-section .priority-chart{ display: block !important; }
  #priority-section .priority-list{ display: none !important; }
  #priority-section{
    padding: 0; background: transparent; border: 0;
  }
  #priority-section .priority-section__title{
    font-family: var(--font-display); font-weight: 600;
    font-size: 22pt; line-height: 1.1; color: var(--ink);
    margin: 0 0 8px;
  }
  #priority-section .priority-section__lede{
    font-size: 10pt; color: var(--muted); line-height: 1.5;
    margin: 0 0 14px; max-width: 150mm;
  }
  #priority-section .priority-section__note{
    margin-top: 14px;
    font-family: var(--font-mono); font-size: 7.5pt; color: var(--muted);
    letter-spacing: 0.02em; line-height: 1.55; max-width: 160mm;
    font-style: normal;
  }
  #priority-section .priority-svg{ max-height: 180mm; }
  #priority-section .priority-empty{
    border: 1px dashed var(--border); padding: 18px 22px;
  }
  #priority-section .priority-empty__text{
    font-size: 10pt; color: var(--muted); font-style: normal;
  }
  /* Tabela de comparáveis e gráfico de faixa fluem em sequência com o
     portfólio — sem forçar página nova entre eles (caberia mal). */

  /* Nada de blocos cortados no meio da página. */
  /* .pricediag ficou de fora de propósito: com explicação + exemplos +
     sugestão em cada cartão, o bloco passa de uma página A4. Manter o
     "avoid" nele empurrava a seção inteira pra página seguinte e sobrava
     meia página em branco no relatório. Os cartões seguem inteiros; a
     quebra, quando precisa, cai entre uma linha de cartões e a outra. */
  .summary-block, .pricestair, .matrix-section, .table, .fin-panel,
  .provenance, .revenue-block, .ps-note, .matrix-reco, .row, .matrix-line,
  .pricediag__card, .priority-section, .priority-chart,
  .changelog__summary, .changelog__item,
  .tierbars, .tb-row,
  .ticketop, .ticketop__kpis, .top-row,
  .pricegiro, .pricegiro__chart, .pricegiro__rest,
  .pdf-section__head, .pdf-cover__body, .pdf-cover__foot, .pdf-table tr{
    break-inside: avoid; page-break-inside: avoid;
  }
  /* Registro de mudanças no papel: o que o dono fez é resultado do trabalho
     dele e é a peça que ele leva pra reunião de sócios — sai no PDF com a cor
     que carrega o tom. Some só o que não faz sentido em papel: a coluna de
     decisão da tabela (não há o que clicar) e os "desfazer". */
  .changelog{ background: #fff !important; border-color: #CFE3D8 !important; }
  .changelog__undo, .reco-table__col-do, .reco-table__cell--do{ display: none !important; }

  /* Diagnóstico de preço abre página própria: o bloco passou de uma página A4
     e, no fluxo, o título sobrava sozinho no pé da anterior (o Chromium ignora
     break-after:avoid). Começando em página nova, cabeçalho e primeira linha
     de cartões saem juntos. */
  .pricediag{ page-break-before: always; break-before: page; padding: 0; border: 0; }
  /* Tipografia mais compacta só no papel: com a explicação e a sugestão
     dentro, cada linha de cartões sozinha ocupava uma folha inteira e o
     cabeçalho sobrava numa página vazia. Assim a abertura e os dois
     primeiros cartões saem juntos. */
  .pricediag__head{ margin-bottom: 14px; }
  .pricediag__lede{ font-size: 9.5pt; }
  .pricediag__grid{ gap: 10px; }
  .pricediag__card{ min-height: 0; padding: 12px 14px 14px; }
  .pricediag__value{ font-size: 22pt; }
  .pricediag__sub{ font-size: 7.5pt; margin-bottom: 8px; }
  .pricediag__what{ font-size: 8.5pt; line-height: 1.45; margin-bottom: 10px; }
  .pricediag__read{ font-size: 9.5pt; line-height: 1.35; }
  .pricediag__ex{ font-size: 8.5pt; line-height: 1.45; }
  .pricediag__block{ margin-top: 10px; }
  .pricediag__block:not(:last-child){ margin-bottom: 10px; }
  .pricediag__do{ padding: 9px 11px; }
  /* Print: força o SVG do scatter (regra mobile o esconde por @media width). */
  .pricegiro__chart, .pricegiro__legend{ display: block !important; }
  .pricegiro__mlist{ display: none !important; }
  /* Tabela de comparáveis e tabela de sugestões repetem o cabeçalho a cada página. */
  thead{ display: table-header-group; }
  .pdf-table thead{ display: table-header-group; }

  /* Larguras fixas de tela podem estourar o A4 — solta o relatório. */
  #result, .report{ max-width: none !important; }

  /* Solta truncamento por reticências: no PDF há espaço, não cortar nome. */
  .row__name, .matrix-chip__name{ text-overflow: clip !important; overflow: visible !important; white-space: normal !important; }

  /* Linha de comparação: empilha o R$/100g (e a nota de gramagem) ABAIXO do
     preço cheio em vez de ao lado. Sob A4, as células de preço encolhem para
     ~150px de fração; em fluxo row o "R$ 44/100g" estoura a célula e cobre a
     coluna seguinte. Coluna mantém alinhamento à direita (números colados na
     mediana ao lado), igual ao padrão visual da tabela. */
  .row .cell--price{
    flex-direction: column; align-items: flex-end; gap: 2px;
    /* Sem overflow: visible, o tooltip de gramatura (price-mismatch) fica cortado
       ou sobreposto à linha seguinte no PDF impresso. */
    overflow: visible; min-width: 0;
  }
  .row .cell--price .price-per-unit,
  .row .cell--price .price-mismatch{ text-align: right; width: auto; align-self: flex-end; }
  /* Garante que o mismatch NÃO fique lado a lado do R$/100g — sempre em nova
     linha, ancorado à direita, sem sobrepor a mediana da coluna vizinha. */
  .row .cell--price .price-mismatch{ margin-top: 3px; margin-right: 0; }

  /* "Descrições que vendem" é o painel da matriz onde o dono dispara/edita
     descrições por IA. Botões (GERAR / copiar / outra versão / chevron),
     "Gerar para todos os heróis" e a barra de progresso são CONTROLES — não
     pertencem ao PDF entregável. No fluxo previsto do roteiro, as descrições
     são geradas ANTES da entrega; o que sair impresso é só a frase de venda
     pronta. Itens sem descrição salva ficam fora — entrega não carrega
     "vazio com botão GERAR". */
  #matrix-heroes .matrix-heroes__all,
  #matrix-heroes .matrix-heroes__progress,
  #matrix-heroes .sell-desc__actions,
  #matrix-heroes .desc-btn,
  #matrix-heroes details > summary > svg,
  #matrix-heroes details > summary > button,
  #matrix-heroes .sell-desc__retry,
  /* Mesma régua na tabela de comparação: o botão "GERAR DESCRIÇÃO" debaixo de
     cada item é controle de UI — sem frase salva não tem nada a entregar. */
  .row .desc-btn,
  .row .sell-desc__actions,
  .row .sell-desc__retry{ display: none !important; }
  /* Esconde o card inteiro quando o herói ainda não tem frase salva. */
  #matrix-heroes .matrix-heroes__item:not(:has(.sell-desc--filled)){ display: none !important; }
  /* Se a lista inteira ficar vazia (smoke sem nenhuma descrição), some o painel. */
  #matrix-heroes:not(:has(.sell-desc--filled)){ display: none !important; }

  /* Rodapé textual do relatório — mantido (procedência fica visível). */
  .print-foot{
    margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 7.5pt; color: var(--muted);
    text-align: center; letter-spacing: 0.03em;
  }
}

/* Selo de fronteira dos visuais competitivos (F1.2/F1.3). Caixa discreta:
   o leitor precisa enxergar, mas o selo NÃO compete com o conteúdo do
   visual. Cinza neutro, tipografia menor, linha contínua sem ornamento. */
.frontier-badge{
  margin: 10px 0;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.frontier-badge .frontier-line{ display: block; }
.frontier-badge .frontier-line + .frontier-line{ margin-top: 2px; }

/* ===================================================================
   F1.4 — Minha Praça (âncora de ambiente físico).
   Mesma família visual do tierbars/compmap (eyebrow mono dourado, título
   Fraunces, lede curta). Ranking de TICKET MÉDIO POR OPERAÇÃO — vizinhos
   heterogêneos de container/quiosque. Não sai no PDF por enquanto (é
   análise interativa, o dono edita a lista de vizinhos ali mesmo).
   =================================================================== */
.plaza{
  margin: 4px 0 8px;
  padding: 24px 28px 28px;
  border-bottom: 1px solid var(--border);
}
.plaza[hidden]{ display: none !important; }
.plaza__head{ margin-bottom: 20px; }
.plaza__heading{ display: flex; flex-direction: column; gap: 2px; }
.plaza__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.plaza__title{
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg);
  color: var(--ink); margin: 0 0 8px; letter-spacing: -0.01em;
}
.plaza__lede{
  margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); max-width: 68ch;
}
.plaza__lede b{ color: var(--ink); font-weight: 600; }

/* ---------- Estado de erro transiente (catálogo não carregou) ---------- */
.plaza__error[hidden]{ display: none !important; }
.plaza__error{
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
}
.plaza__error-msg{ margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- Estado 1: setup (sem praça escolhida) ---------- */
.plaza__setup{
  padding: 20px;
  background: var(--paper);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
}
.plaza__setup-row{
  display: flex; flex-wrap: wrap; align-items: end; gap: 14px;
}
.plaza__setup-or{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  padding-bottom: 12px;
}
.plaza__setup-hint{
  margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45;
}
.plaza__field{ display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 1 1 240px; }
.plaza__label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.plaza__select, .plaza__field input, .plaza__field select{
  padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font-size: var(--fs-md);
  font-family: inherit;
}
.plaza__select:focus, .plaza__field input:focus, .plaza__field select:focus{
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.plaza__form, .plaza__addform{
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 14px;
}
.plaza__form[hidden], .plaza__addform[hidden]{ display: none !important; }
.plaza__form-grid, .plaza__addform-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
}
.plaza__form-actions{
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.plaza__form-msg{
  font-size: var(--fs-sm); color: var(--muted);
}
.plaza__form-msg.is-error{ color: #b34a3f; }

/* ---------- Estado 2: praça escolhida (análise) ---------- */
.plaza__live[hidden]{ display: none !important; }

.plaza__badge{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  padding: 10px 14px;
  background: var(--accent-soft, rgba(201,169,97,0.08));
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  margin-bottom: 20px;
}
.plaza__badge-eyebrow{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); font-weight: 600;
}
.plaza__badge-name{
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--ink);
}
.plaza__badge-count{
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums;
}
.plaza__badge-change{
  margin-left: auto;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  padding: 4px 10px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em;
  text-transform: uppercase; cursor: pointer;
}
.plaza__badge-change:hover{ color: var(--ink); border-color: var(--ink); }

.plaza__range{
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.plaza__range-nums{
  display: flex; justify-content: space-between; gap: 12px;
  margin-bottom: 18px;
}
.plaza__range-num{
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.plaza__range-num--big .plaza__range-val{ font-size: 2rem; color: var(--ink); }
.plaza__range-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); font-weight: 600;
}
.plaza__range-val{
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.plaza__range-num--big{ text-align: center; }
.plaza__range-num:last-child{ text-align: right; }

/* Distribuição (histograma horizontal em baldes). */
.plaza__dist{
  display: flex; align-items: flex-end;
  gap: 6px; height: 84px;
  padding: 12px 0 6px;
  border-top: 1px dashed var(--border);
  position: relative;
}
.plaza__dist-bar{
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px; height: 100%; min-width: 0;
}
.plaza__dist-fill{
  width: 100%;
  background: var(--primary);
  opacity: 0.6;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: opacity .3s var(--ease);
}
.plaza__dist-bar.is-you .plaza__dist-fill{
  background: var(--accent); opacity: 1;
}
.plaza__dist-lbl{
  font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plaza__dist-you{
  margin: 8px 0 0; font-size: var(--fs-sm); color: var(--ink);
  font-family: var(--font-mono); letter-spacing: 0.03em;
}
.plaza__readout{
  margin: 14px 0 0; font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
}
.plaza__readout b{ font-weight: 600; color: var(--ink); }
.plaza__warning{
  margin: 10px 0 0; padding: 8px 12px;
  background: var(--accent-soft, rgba(201,169,97,0.08));
  border-left: 3px solid var(--accent);
  color: var(--ink); font-size: var(--fs-sm); line-height: 1.45;
}

.plaza__members{
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
.plaza__members-head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.plaza__members-title{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); font-weight: 600;
}
.plaza__members-actions{
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
/* Fila de uploads em processamento — só aparece enquanto há cardápios sendo
   extraídos pra virar vizinho. Some sozinha quando a fila zera. */
.plaza__uploads[hidden]{ display: none !important; }
.plaza__uploads{
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.plaza__uploads-item{
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  align-items: start;
}
.plaza__uploads-item[data-status="processing"] .plaza__uploads-status{ color: var(--muted); }
.plaza__uploads-item[data-status="done"] .plaza__uploads-status{ color: var(--positive, #2e7d52); }
.plaza__uploads-item[data-status="error"] .plaza__uploads-status{ color: var(--primary); }
.plaza__uploads-name{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.plaza__uploads-status{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.03em;
  text-transform: uppercase; white-space: nowrap;
}
/* Erro precisa caber a frase inteira ("Cole o texto do cardápio..."):
   sem uppercase, sem nowrap, sem trunca — quando o motor está honestamente
   pausado, o dono lê a orientação, não um "FALHA" cortado. */
.plaza__uploads-item[data-status="error"] .plaza__uploads-status{
  text-transform: none; white-space: normal; text-align: right;
  font-family: inherit; letter-spacing: 0; font-size: var(--fs-sm);
  max-width: 32ch;
}
/* Mobile: 2 colunas fazem o nome sumir e a mensagem espremer. Empilha em
   uma coluna — nome em cima (com espaço pra respirar), orientação embaixo
   alinhada à esquerda. */
@media (max-width: 560px){
  .plaza__uploads-item{
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .plaza__uploads-item[data-status="error"] .plaza__uploads-status{
    text-align: left; max-width: none;
  }
}

/* Scope-picker (topo da tela): pergunta primeiro "onde você quer analisar?"
   antes do form de análise, evita confusão de decidir isso dentro do
   relatório. 2 cards radios lado a lado; o segundo revela um slot onde o
   bloco #plaza é movido via JS quando ativado. */
/* O bloco vive DENTRO da caixa do cardápio e nasce colapsado: em repouso é
   uma linha ("Comparando com a base ampla de São Paulo · Trocar"). Mesma
   gramática do <details> "Refinar análise" logo abaixo — dois recolhíveis
   irmãos, não dois desenhos diferentes. */
.scope{
  margin: 16px 16px 8px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.scope__summary{
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-md);
  transition: background .18s var(--ease);
}
.scope__summary::-webkit-details-marker{ display: none; }
.scope__summary:hover{ background: var(--primary-04); }
.scope__summary:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
.scope__summary-label{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); font-weight: 600;
  flex: none;
}
.scope__summary-value{
  font-weight: 600; color: var(--ink); font-size: var(--fs-md);
  flex: 1 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scope__summary-action{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--primary);
  flex: none;
}
.scope__summary-ico{ color: var(--muted); flex: none; transition: transform .18s var(--ease); }
.scope[open] .scope__summary-ico{ transform: rotate(180deg); }
.scope[open] .scope__summary-action{ visibility: hidden; }
.scope__body{
  padding: 16px;
  border-top: 1px solid var(--border);
}
@media (max-width: 560px){
  .scope{ margin: 12px 8px 4px; }
  .scope__summary{ padding: 14px; min-height: 44px; flex-wrap: wrap; }
  .scope__summary-value{ white-space: normal; }
  .scope__body{ padding: 12px; }
}
/* 2x2 e não 4 colunas: com quatro escopos, uma faixa única espremeria as
   dicas em cinco linhas cada. A grade em pares também carrega o sentido —
   linha de cima é geografia (bairro / cidade), linha de baixo é universo
   fechado (praça / concorrentes). */
.scope__opts{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.scope__opt{
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  position: relative;
}
.scope__opt input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; }
.scope__opt:hover{ border-color: var(--primary-15); }
.scope__opt.is-active{
  border-color: var(--primary);
  background: var(--primary-04);
  box-shadow: 0 0 0 3px var(--primary-04);
}
.scope__opt-title{ font-weight: 600; color: var(--ink); font-size: var(--fs-md); }
.scope__opt-hint{ color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.scope__plaza-slot{ margin-top: 16px; }
.scope__plaza-slot:empty{ display: none; }

/* Recorte bairro/cozinha dentro do scope-picker. O .recorte base foi
   desenhado pra viver no corpo de um card do form (padding lateral próprio);
   aqui ele é continuação dos cards, então perde o padding lateral e ganha
   um filete separando dos radios. */
.scope__recorte[hidden]{ display: none !important; }
.scope__recorte{
  margin-top: 16px;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
}

/* O antigo .scope-crumb ("COMPARAR CONTRA · <praça>") foi absorvido pela
   linha de resumo do próprio bloco — ver .scope__summary acima. */

/* Com o campo de bairro escondido (escopo = base ampla), a cozinha sozinha
   não deve esticar pela linha inteira: um <select> de 100% de largura lê como
   campo importante, e ele é o opcional. */
.recorte__grid.is-solo{ grid-template-columns: 1fr 1fr; }
.recorte__field[hidden]{ display: none !important; }
.recorte__err{
  color: var(--danger);
  font-size: var(--fs-sm); line-height: 1.35;
  margin-top: 2px;
}
.recorte__err[hidden]{ display: none !important; }
.recorte__input.is-invalid{
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-bg);
}

@media (max-width: 680px){
  .scope__opts{ grid-template-columns: 1fr; }
  .recorte__grid.is-solo{ grid-template-columns: 1fr; }
}

/* ---------- Meus concorrentes ---------- */
/* Mora dentro do #scope-picker, como o bloco de praça. Idioma visual igual ao
   do plaza pra não parecer feature enxertada. */
.rivals{ margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.rivals[hidden]{ display: none !important; }
.rivals__head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.rivals__title{ font-size: var(--fs-lg); font-weight: 600; color: var(--ink); margin: 0 0 2px; }
.rivals__lede{ color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; margin: 0; max-width: 62ch; }
.rivals__actions{ display: flex; gap: 8px; flex-wrap: wrap; }

.rivals__chosen{
  background: var(--primary-04);
  border: 1px solid var(--primary-15);
  border-radius: var(--r-sm);
  padding: 12px 14px; margin-bottom: 14px;
}
.rivals__chosen-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rivals__chosen-title{ font-size: var(--fs-md); color: var(--ink); }
.rivals__clear{
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--fs-sm); color: var(--muted); text-decoration: underline;
}
.rivals__clear:hover{ color: var(--ink); }
.rivals__chips{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rivals__chip{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 6px 4px 12px; font-size: var(--fs-sm); color: var(--ink);
}
.rivals__chip-x{
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: var(--fs-lg); line-height: 1; padding: 0 4px; border-radius: 999px;
}
.rivals__chip-x:hover{ color: var(--negative); }
/* Amostra curta é dita em voz alta: a lista é escolha do dono, mas o número
   pequeno não pode virar quartil apresentado como verdade. */
.rivals__warn{
  margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.45;
  color: #8a7430;
}
.rivals__warn[hidden]{ display: none !important; }

.rivals__lenses{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rivals__lens{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font-size: var(--fs-sm); color: var(--muted);
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.rivals__lens:hover{ border-color: var(--primary-15); color: var(--ink); }
.rivals__lens.is-active{ background: var(--primary); border-color: var(--primary); color: #fff; }
.rivals__lens-note{ color: var(--muted); font-size: var(--fs-sm); margin: 0 0 10px; }

.rivals__cands{
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  max-height: 380px; overflow-y: auto;
}
.rivals__cand{
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; background: var(--surface); cursor: pointer;
}
.rivals__cand:hover{ border-color: var(--primary-15); }
.rivals__cand.is-chosen{ border-color: var(--primary); background: var(--primary-04); }
.rivals__cand input[type="checkbox"]{ margin-top: 3px; flex: none; }
/* Nome, meta e motivo em linhas próprias: corridos, "mediana R$ 49" colava em
   "No seu bairro" e o motivo virava continuação da ficha técnica. */
.rivals__cand-body{ min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rivals__cand-name{ font-size: var(--fs-md); font-weight: 600; color: var(--ink); display: block; }
.rivals__cand-meta{ font-size: var(--fs-sm); color: var(--muted); display: block; }
.rivals__cand-why{ font-size: var(--fs-xs); color: var(--primary-60); line-height: 1.4; display: block; margin-top: 2px; }

.rivals__uploads{ list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.rivals__uploads[hidden]{ display: none !important; }
.rivals__upload{ font-size: var(--fs-sm); color: var(--muted); display: flex; gap: 8px; align-items: center; }

@media (max-width: 680px){
  .rivals__cands{ grid-template-columns: 1fr; }
  .rivals__head{ flex-direction: column; }
}
.plaza__list{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.plaza__list-item{
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.plaza__list-item.is-noprice{ opacity: 0.68; }
.plaza__list-name{
  font-size: var(--fs-md); color: var(--ink); font-weight: 500;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plaza__list-cuisine{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
  padding: 3px 8px; background: var(--surface); border-radius: 4px;
  white-space: nowrap;
}
.plaza__list-ticket{
  font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
  min-width: 66px; text-align: right;
}
.plaza__list-ticket--empty{ color: var(--muted); font-weight: 400; }
.plaza__list-remove{
  background: transparent; border: none; color: var(--muted); font-size: var(--fs-md);
  cursor: pointer; padding: 4px 6px; line-height: 1;
}
.plaza__list-remove:hover{ color: #b34a3f; }
.plaza__list-empty{
  padding: 16px; text-align: center; color: var(--muted);
  font-size: var(--fs-md); font-style: italic;
}

@media (max-width: 520px){
  .plaza{ padding: 20px 16px 22px; }
  .plaza__range-nums{ flex-direction: column; gap: 10px; }
  .plaza__range-num, .plaza__range-num:last-child{ text-align: left; }
  .plaza__range-num--big{ text-align: left; }
  .plaza__list-item{
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: "name ticket" "cuisine remove";
    gap: 6px;
  }
  .plaza__list-name{ grid-area: name; }
  .plaza__list-ticket{ grid-area: ticket; }
  .plaza__list-cuisine{ grid-area: cuisine; justify-self: start; }
  .plaza__list-remove{ grid-area: remove; justify-self: end; }
}

/* ---------- Pendências para validar (bloco rodapé "confesso o que
   não sei") ------------------------------------------------------- */
.pendencies[hidden]{ display: none !important; }
/* ---------- Trabalho de cozinha x preço ----------
   Bloco de CONTRASTE, não de pendência: aqui não falta informação, sobra um
   fato desconfortável. Por isso borda cheia e acento, e não a borda tracejada
   de "preencher depois". */
.labor-flip{
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--rule, #d4c9b3);
  border-left: 3px solid var(--accent, #b9892f);
  border-radius: var(--r-md);
}
.labor-flip__head{ margin-bottom: 14px; }
.labor-flip__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
  display: block;
}
.labor-flip__title{
  margin: 8px 0 0;
  font-size: var(--fs-lg);
}
.labor-flip__lede{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.5;
  max-width: 62ch;
}
.labor-flip__list{ list-style: none; margin: 0; padding: 0; }
.labor-flip__item{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--rule, #e6dfd0);
}
.labor-flip__pair{ line-height: 1.5; }
.labor-flip__tag{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent, #b9892f);
  margin-left: 6px;
}
.labor-flip__rel{ color: var(--muted); display: block; font-size: var(--fs-md); }
.labor-flip__calc{
  display: block; margin-top: 3px;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink);
}
.labor-flip__est{ color: var(--muted); font-style: italic; }
.labor-flip__prices{
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--muted);
  white-space: nowrap;
}
@media (max-width: 640px){
  .labor-flip__item{ flex-direction: column; gap: 4px; }
}

.pendencies{
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px dashed var(--rule, #d4c9b3);
  border-radius: var(--r-md);
}
.pendencies__head{ margin-bottom: 12px; }
.pendencies__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
  display: block;
}
.pendencies__lede{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-md);
}
.pendencies__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pendencies__group-head{
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.pendencies__kind{
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink, var(--primary));
  letter-spacing: 0.02em;
}
.pendencies__hint{
  font-size: var(--fs-sm);
  color: var(--muted);
}
.pendencies__items{
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.pendencies__items li{
  position: relative;
  padding-left: 12px;
  font-size: var(--fs-md);
  color: var(--ink);
}
.pendencies__items li::before{
  content: '·';
  position: absolute;
  left: 0;
  color: var(--muted);
}
/* Quando o motivo é de cada prato (números diferentes por linha), a lista
   deixa de ser uma fileira de chips e vira uma linha por prato — senão o
   motivo quebra no meio da frase ao lado do vizinho. */
.pendencies__items--detail{
  flex-direction: column;
  gap: 8px;
}
.pendencies__items--detail li{
  color: var(--muted);
  line-height: 1.45;
}
.pendencies__items--detail li b{
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Régua declarada (Onda 2) — posicionamento e ticket-alvo -------- */
.pos{
  padding: 16px 16px 0;
}
.pos__hint{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.pos__grid{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  align-items: start;
}
.pos__field{
  display: flex; flex-direction: column; gap: 8px;
  border: none; padding: 0; margin: 0;
}
.pos__label{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink); font-weight: 500;
}
.pos__optional{
  text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 400;
}
.pos__radiogroup{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
@media (max-width: 900px){
  .pos__radiogroup{ grid-template-columns: repeat(2, 1fr); }
}
.pos__radio{
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  background: var(--surface);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.pos__radio:hover{ border-color: var(--primary); }
.pos__radio input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; }
.pos__radio:has(input:checked){
  border-color: var(--primary);
  background: var(--primary-04, var(--primary-04));
}
.pos__radio-title{
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink);
}
.pos__radio-hint{
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.3;
}
.pos__ticket-wrap{
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 6px 10px;
}
.pos__ticket-wrap:focus-within{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-04);
}
.pos__ticket-prefix{
  font-family: var(--font-mono); font-size: var(--fs-md); color: var(--muted);
}
.pos__ticket-input{
  border: none; background: transparent; outline: none;
  font-family: var(--font-mono); font-size: var(--fs-md); color: var(--ink);
  width: 100%;
}
.pos__ticket-input::-webkit-outer-spin-button,
.pos__ticket-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.pos__ticket-hint{
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.3;
}

@media (max-width: 640px){
  .pos__grid{ grid-template-columns: 1fr; }
  .pos__radiogroup{ grid-template-columns: 1fr; }
}

/* ---------- Régua declarada (Onda 2) — chip discreto no topo do relatório -- */
.posruler[hidden]{ display: none !important; }
.posruler{
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  align-items: center;
  padding: 10px 14px;
  margin: 16px 0 0;
  background: transparent;
  border-left: 3px solid var(--primary, var(--primary));
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.posruler__kicker{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.posruler__chip{
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.posruler__chip strong{ font-weight: 600; }

/* ---------- Combos de ticket-alvo (Onda 2) ---------- */
.tcombos[hidden]{ display: none !important; }
.tcombos{
  margin: 32px 0;
  padding: 20px 24px;
  background: transparent;
  border-left: 3px solid var(--primary, var(--primary));
}
.tcombos__head{ margin-bottom: 14px; }
.tcombos__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
  display: block;
}
.tcombos__lede{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-md);
}
.tcombos__loading{
  padding: 12px 0;
  font-style: italic;
  color: var(--muted);
  font-size: var(--fs-md);
}
.tcombos__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px){
  .tcombos__grid{ grid-template-columns: 1fr; }
}
.tcombo{
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 10px;
}
.tcombo__head{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
}
.tcombo__momento{
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tcombo__total{
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tcombo__delta{
  font-size: var(--fs-sm); font-weight: 500; color: var(--muted);
}
.tcombo__itens{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.tcombo__itens li{
  display: flex; justify-content: space-between; gap: 8px;
  font-size: var(--fs-md); color: var(--ink);
  padding: 2px 0;
  border-bottom: 1px dotted var(--rule, #e6ddc8);
}
.tcombo__itens li:last-child{ border-bottom: none; }
.tcombo__preco{
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.tcombo__est{
  font-size: var(--fs-sm); color: var(--muted); font-style: italic;
}
.tcombo__just{
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
  line-height: 1.4;
}

/* ---------- Percentil posicional (Onda 3) — a linha que só a base indexada
   consegue entregar. Discreto mas presente, com destaque numérico. */
.percentile-note{
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink);
  padding: 4px 8px;
  background: var(--surface);
  border-left: 2px solid var(--primary, var(--primary));
  border-radius: 2px;
}

/* A leitura da plataforma dentro da faixa do repasse. Borda pontilhada e
   opacidade menor de propósito: a linha acima dela é fato (a faixa e onde o
   preço do dono cai nela); esta é o que NÓS achamos, com referência
   emprestada. Peso visual igual faria a recomendação ler como medição. */
.percentile-note--canal{
  border-left-style: dotted;
  opacity: 0.9;
}

/* Anel de nível — a segunda leitura, contra quem cobra na mesma faixa por
   perto. Fica logo abaixo da leitura do bairro e mais discreta que ela: é
   leitura complementar, não substituta. */
.percentile-note--nivel{
  border-left-style: dashed;
  opacity: 0.92;
}
/* Divergiu do que a leitura do bairro disse. É o caso que muda a decisão do
   dono — a borda cheia tira a linha do rodapé visual. */
.percentile-note--nivel-vira{
  border-left-style: solid;
  border-left-color: var(--accent, var(--accent));
  opacity: 1;
}

/* Anel de nível no celular: a coluna de leitura some abaixo de 560px, e só o
   caso que DIVERGE do bairro atravessa — em pill, na coluna de item, do lado
   da pill de sugestão. Contorno em vez de fundo cheio: a de sugestão é ação
   ("suba pra R$X"), esta é contexto ("a régua aqui é outra"), e as duas com o
   mesmo peso brigariam pela mesma atenção. */
.nivel-pill{ display: none; }
@media (max-width: 560px){
  .nivel-pill--mobile{
    display: inline-flex; align-items: baseline; gap: 4px;
    /* Quebra em vez de cortar: a coluna de item é estreita e a frase inteira
       ("no seu nível R$ 28 · na faixa") não cabe numa linha. Truncada, o que
       sobrava era o número sem o veredito — que é a metade que importa. */
    white-space: normal;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs); font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--accent, var(--accent));
    border-radius: var(--r-sm);
    padding: 3px 8px; margin-top: 4px;
    max-width: 100%;
    font-variant-numeric: tabular-nums;
  }
  .nivel-pill__pos{ font-weight: 400; opacity: 0.8; }
  /* A faixa do repasse no celular. Contorno tracejado porque ela não é uma
     segunda régua como o anel de nível: é a MARGEM DE DÚVIDA da régua que a
     linha já mostra. Linha cheia daria a ela o peso de medida. */
  .nivel-pill--faixa{ border-style: dashed; }
}

/* ===================================================================
   F4 — Cardápio em construção: linha de sugestão pura e linha "aguardando".
   Preço não declarado: mesma linha da tabela, tom mais leve, badge próprio.
   =================================================================== */
.row--suggest{
  background: color-mix(in srgb, var(--accent-soft, #f2f6ff) 40%, transparent);
}
.row--suggest .cell--price:first-of-type .suggest-price{
  color: var(--primary, var(--primary));
  font-weight: 600;
  border-bottom: 1px dashed var(--primary, var(--primary));
  padding-bottom: 1px;
}
.row--suggest .cell--reco .suggest-anchors{
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--muted, var(--slate));
  letter-spacing: 0.02em;
}
.row--awaiting{ opacity: 0.85; }
.row--awaiting .cell--reco{ color: var(--muted, var(--slate)); font-style: italic; }
.row--awaiting .delta{ visibility: hidden; }

.awaiting-pill{
  display: inline-block; margin-left: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--slate-border); border-radius: 999px;
  padding: 0 6px; vertical-align: middle;
}
.awaiting-pill--suggest{
  color: var(--primary, var(--primary));
  border-color: var(--primary, var(--primary));
  background: color-mix(in srgb, var(--accent-soft, #f2f6ff) 60%, transparent);
}

/* ================================================================
   Banda por categoria da praça — instrumento de posicionamento
   item-a-item em food hall gourmet. Piso e teto nomeados (vizinho
   INDIRETO ancora, mesmo entre cozinhas diferentes).
================================================================ */
.plaza__bands{ margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--slate-line); }
.plaza__bands-head{ display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.plaza__bands-title{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate-dark);
}
.plaza__bands-note{ font-size: var(--fs-sm); color: var(--slate); line-height: 1.4; }
.plaza__bands-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px){
  .plaza__bands-list{ grid-template-columns: 1fr 1fr; }
}
.plaza__band-item{
  border: 1px solid var(--slate-line); border-radius: 6px; padding: 10px 12px;
  background: #FBFCFD; display: grid; gap: 6px;
}
.plaza__band-cat{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate);
}
.plaza__band-range{ display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plaza__band-num{ font-family: var(--font-mono); font-size: var(--fs-md); color: var(--primary); }
.plaza__band-num--med{ font-weight: 600; }
.plaza__band-sep{ color: #B0B9C1; }
.plaza__band-n{ font-size: var(--fs-xs); color: var(--slate-light); margin-left: auto; }
.plaza__band-peers{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: var(--fs-sm); }
.plaza__band-peer{ display: flex; flex-direction: column; gap: 1px; }
.plaza__band-peer-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate-light);
}
.plaza__band-peer--floor .plaza__band-peer-label{ color: #4A7C59; }
.plaza__band-peer--ceiling .plaza__band-peer-label{ color: #8B4513; }
.plaza__band-peer-name{ color: #2C3B48; }

/* ================================================================
   Tabela de Recomendação — mesmo formato do relatório-âncora
   (Item · Preço atual · Recomendado · Justificativa).
================================================================ */
.reco-table{ margin-top: 32px; padding: 20px 22px; background: #F8FAFB; border: 1px solid var(--slate-line); border-radius: 8px; }
.reco-table__head{ margin-bottom: 14px; }
.reco-table__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 6px;
}
.reco-table__title{ font-size: var(--fs-xl); margin: 0 0 6px 0; color: var(--primary); font-weight: 600; }
.reco-table__lede{ font-size: var(--fs-sm); color: var(--slate-dark); margin: 0; line-height: 1.5; }
.reco-table__wrap{ overflow-x: auto; }
.reco-table__grid{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: 12px; }
.reco-table__grid th{
  text-align: left; padding: 8px 10px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate);
  border-bottom: 1px solid var(--slate-border);
}
.reco-table__grid td{ padding: 10px; border-bottom: 1px solid var(--slate-line); vertical-align: top; }
.reco-table__row:last-child td{ border-bottom: none; }
.reco-table__item-name{ font-weight: 600; color: var(--primary); margin-bottom: 4px; }
.reco-table__item-meta{ display: flex; gap: 4px; flex-wrap: wrap; }
.reco-table__pill{
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.reco-table__pill--suggest{ background: #E7EEF7; color: var(--slate-blue); }
.reco-table__pill--adjust{ background: #FCF2E4; color: #8B5A00; }
.reco-table__cell--cur, .reco-table__cell--rec{
  font-family: var(--font-mono); white-space: nowrap;
}
.reco-table__cell--rec{ font-weight: 600; color: var(--primary); }
/* Impacto/mês embaixo do preço recomendado. Veio da tabela do PDF que foi
   removida — é o número que sustenta a ordem da lista, então mora colado na
   decisão, não numa coluna à parte. */
.reco-table__impact{
  display: block; margin-top: 3px; font-weight: 500;
  font-size: var(--fs-xs); color: #2F7A4F; white-space: nowrap;
}
.reco-table__impact-est{ color: var(--slate-light); font-weight: 400; }
.reco-table__cur-empty{ color: var(--slate-light); font-style: italic; }
.reco-table__foot{
  margin: 14px 0 0; font-size: var(--fs-xs); color: var(--slate);
  line-height: 1.5; max-width: 78ch;
}
.reco-table__cell--just{ color: var(--slate-ink); line-height: 1.45; }
@media (max-width: 640px){
  .reco-table{ padding: 14px; }
  .reco-table__grid{ font-size: var(--fs-sm); }
  .reco-table__grid td, .reco-table__grid th{ padding: 8px 6px; }
  /* NO CELULAR CADA LINHA VIRA UM CARTÃO (15/09). A tabela de cinco colunas
     rolava de lado e escondia justamente a justificativa e o "Fiz" — quem
     estava no celular só via nome e preço atual. Nada de rolagem: item, os
     dois preços lado a lado, a justificativa e os botões, empilhados. */
  .reco-table__wrap{ overflow: visible; }
  .reco-table__grid thead{ display: none; }
  .reco-table__grid, .reco-table__grid tbody, .reco-table__grid tr{ display: block; }
  .reco-table__grid tr{ padding: 12px 0; border-bottom: 1px solid var(--slate-line); }
  .reco-table__grid td{ display: block; padding: 0; border: 0; }
  .reco-table__cell--cur, .reco-table__cell--rec{ display: inline-block; margin-top: 6px; }
  .reco-table__cell--cur::before{ content: attr(data-rotulo) " "; font-family: inherit; color: var(--slate); font-weight: 400; }
  .reco-table__cell--rec{ margin-left: 14px; }
  .reco-table__cell--rec::before{ content: "→ "; color: var(--slate); font-weight: 400; }
  .reco-table__impact{ display: inline; margin-left: 6px; }
  .reco-table__cell--just{ margin-top: 8px; }
  .reco-table__cell--do{ margin-top: 10px; white-space: normal; }
  .reco-table__cell--do .reco-do{ flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ================================================================
   COLUNA DE DECISÃO — "você fez?"

   O relatório para de ser só leitura: cada linha registra o que o dono
   fez com a recomendação. A linha já decidida esmaece e desce, mas
   nunca some — desfazer tem que estar sempre à mão.
   ================================================================ */
.reco-table__col-do{ width: 148px; }
.reco-table__cell--do{ white-space: nowrap; }
.reco-table__row.is-decided td{ opacity: 0.55; }
.reco-table__row.is-decided:hover td{ opacity: 0.85; }
.reco-do{ display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.reco-do__btn{
  font-family: inherit; font-size: var(--fs-xs); line-height: 1.2;
  padding: 5px 10px; border-radius: 5px; cursor: pointer;
  border: 1px solid var(--slate-border); background: #FFF; color: var(--slate-ink);
  transition: background 0.12s, border-color 0.12s;
}
.reco-do__btn:hover{ background: #F1F5F8; border-color: #8FA3B4; }
.reco-do__btn--yes{ border-color: #2E7D5B; color: var(--positive-deep); font-weight: 600; }
.reco-do__btn--yes:hover{ background: #E8F4EE; border-color: #2E7D5B; }
.reco-do__btn--no{ color: var(--slate); }
.reco-do__btn--ghost{ border: none; background: none; color: var(--slate-light); padding: 4px 2px; text-decoration: underline; }
.reco-do__btn:disabled{ opacity: 0.5; cursor: default; }
.reco-do__done{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.03em;
  color: var(--positive-deep); background: #E8F4EE; border-radius: 999px; padding: 2px 9px;
  white-space: nowrap;
}
.reco-do--recusado .reco-do__done{ color: var(--slate); background: #EDF1F4; }
.reco-do__when{ font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--slate-light); }
.reco-do__undo{
  border: none; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-xs); color: var(--slate-light); text-decoration: underline;
}
.reco-do__undo:hover{ color: var(--slate-dark); }
.reco-do__form{ display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-width: 138px; }
.reco-do__label{ font-size: var(--fs-xs); color: var(--slate); line-height: 1.3; white-space: normal; }
.reco-do__opt{ color: #A0A8AF; }
.reco-do__field{
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid #8FA3B4; border-radius: 5px; padding: 3px 7px; background: #FFF;
}
.reco-do__prefix{ font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--slate); }
.reco-do__input{
  border: none; outline: none; width: 62px; background: transparent;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--primary);
}
.reco-do__input--note{
  width: 100%; min-width: 130px; border: 1px solid var(--slate-border); border-radius: 5px;
  padding: 5px 7px; font-family: inherit; font-size: var(--fs-xs); white-space: normal;
}
.reco-do__input--err{ box-shadow: 0 0 0 2px rgba(190, 60, 60, 0.35); border-radius: 4px; }
.reco-do__actions{ display: flex; gap: 8px; align-items: center; }
.reco-table__cell--do[data-busy]{ opacity: 0.6; }

/* ================================================================
   REGISTRO DE MUDANÇAS — "o que você já fez"

   O bloco que transforma o relatório de foto em acompanhamento. Vai
   pro PDF (é resultado do trabalho dele, não controle da tela); só os
   botões de desfazer ficam de fora do papel.
   ================================================================ */
.changelog{
  margin-top: 32px; padding: 20px 22px;
  background: #F4F9F6; border: 1px solid #CFE3D8; border-radius: 8px;
}
.changelog__head{ margin-bottom: 12px; }
.changelog__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: #4F7A65; margin-bottom: 6px;
}
.changelog__title{ font-size: var(--fs-xl); margin: 0 0 6px 0; color: var(--primary); font-weight: 600; }
.changelog__lede{ font-size: var(--fs-sm); color: var(--slate-dark); margin: 0; line-height: 1.5; }
.changelog__summary{
  font-size: var(--fs-md); color: #2B3A45; padding: 10px 12px; margin-bottom: 4px;
  background: #FFF; border: 1px solid #CFE3D8; border-radius: 6px;
}
.changelog__total{ font-family: var(--font-mono); color: var(--positive-deep); }
.changelog__total-hint{ font-size: var(--fs-sm); color: var(--slate); }
.changelog__list{ list-style: none; margin: 0; padding: 0; }
.changelog__item{
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 2px; border-bottom: 1px solid #DEEAE3;
}
.changelog__item:last-child{ border-bottom: none; }
.changelog__when{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--slate);
  min-width: 46px; flex-shrink: 0;
}
.changelog__what{ flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.changelog__dish{ color: var(--primary); }
.changelog__move{ font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--slate-ink); }
.changelog__item--descartado .changelog__move{ font-family: inherit; font-size: var(--fs-sm); color: var(--slate); }
.changelog__sug{ font-size: var(--fs-xs); color: var(--slate-light); }
.changelog__note{ font-size: var(--fs-sm); color: #5A6570; font-style: italic; }
.changelog__impact{
  font-family: var(--font-mono); font-size: var(--fs-sm); white-space: nowrap; flex-shrink: 0;
}
.changelog__impact.is-up{ color: var(--positive-deep); }
.changelog__impact.is-down{ color: #8B5A00; }
.changelog__undo{
  border: none; background: none; padding: 0; cursor: pointer; flex-shrink: 0;
  font-family: inherit; font-size: var(--fs-xs); color: var(--slate-light); text-decoration: underline;
}
.changelog__undo:hover{ color: var(--slate-dark); }
@media (max-width: 640px){
  .changelog{ padding: 14px; }
  .changelog__item{ flex-wrap: wrap; gap: 4px 10px; }
  .changelog__what{ flex-basis: 100%; }
}

/* ================================================================
   MODO PROJETO — kicker + esmaecimento dos blocos de comparativo.
   Ativa quando #result[data-report-mode="project"]. Cardápio em
   construção não tem preço declarado — o app assume que o foco é
   PROPOR preço (banda da praça + tabela de recomendação), não
   COMPARAR preço. Blocos de comparativo ficam presentes mas
   esmaecidos, marcando que a leitura deles depende de preço real.
================================================================ */
.project-mode-kicker{
  margin: 20px 0 12px;
  padding: 14px 18px;
  background: color-mix(in srgb, var(--accent-soft, #F5EFDE) 70%, transparent);
  border-left: 3px solid var(--accent, var(--gold-mid));
  border-radius: 0 var(--r-md, 6px) var(--r-md, 6px) 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  line-height: 1.5;
}
.project-mode-kicker__badge{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: #fff;
  background: var(--accent, var(--gold-mid)); padding: 3px 10px; border-radius: 3px;
  white-space: nowrap;
}
.project-mode-kicker__text{ font-size: var(--fs-md); color: #2C3B48; flex: 1; min-width: 240px; }
.project-mode-kicker__text b{ color: var(--primary); }

/* Blocos de comparativo esmaecidos em MODO PROJETO — dono ainda pode ver
   o pool de mercado como referência, mas fica claro que não é o eixo. */
#result[data-report-mode="project"] [data-project-order="dim"]{
  opacity: 0.55;
  filter: grayscale(0.35);
  position: relative;
}
#result[data-report-mode="project"] [data-project-order="dim"]::before{
  content: "MODO PROJETO · leitura secundária";
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--slate-light);
  margin-bottom: 6px; padding: 2px 8px;
  border: 1px dashed var(--slate-border); border-radius: 3px;
  width: fit-content;
}

/* No PDF impresso, o kicker some (papel não precisa da explicação de estado)
   e o esmaecimento vira só uma nota tipográfica curta, não sombra visual —
   printer não renderiza opacity de forma consistente. */
@media print {
  .project-mode-kicker{ display: none; }
  #result[data-report-mode="project"] [data-project-order="dim"]{
    opacity: 1; filter: none;
  }
  #result[data-report-mode="project"] [data-project-order="dim"]::before{
    content: "Contexto de mercado — precisa de preço declarado pra leitura direta";
    color: var(--slate); border: none; padding: 0; margin-bottom: 8px;
    letter-spacing: 0.06em;
  }
}

/* -------------------------------------------------------------
   Intent picker — pergunta o que o dono quer ANTES da entrada.
   Mesmo visual do .scope pra reaproveitar a linguagem: eyebrow
   mono + cards-radio em grade. 3 opções: auto (default) /
   operação / projeto. Move a decisão de "modo do relatório"
   pra dentro da UI, antes escondida no ratio de preços do
   servidor.
   ------------------------------------------------------------- */
.intent{
  margin: 0 0 16px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.intent__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); font-weight: 600;
  margin-bottom: 10px;
}
.intent__opts{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.intent__opt{
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
  position: relative;
}
.intent__opt input[type="radio"]{ position: absolute; opacity: 0; pointer-events: none; }
.intent__opt:hover{ border-color: var(--primary-15); }
.intent__opt.is-active{
  border-color: var(--primary);
  background: var(--primary-04);
  box-shadow: 0 0 0 3px var(--primary-04);
}
.intent__opt-title{ font-weight: 600; color: var(--ink); font-size: var(--fs-md); }
.intent__opt-hint{ color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; }

@media (max-width: 820px){
  .intent__opts{ grid-template-columns: 1fr; }
}

/* Carimbo do modo escolhido no topo do relatório — transparência do que
   saiu ("você pediu X e recebeu X", ou "auto virou X porque..."). Blend
   com o fio condutor do resumo executivo, sem robar peso do conteúdo. */
.report__mode-stamp{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px;
  margin: 0 0 12px;
  background: var(--primary-04);
  border: 1px solid var(--primary-15);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--ink);
}
.report__mode-stamp[hidden]{ display: none !important; }
.report__mode-stamp__eyebrow{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); font-weight: 700;
}
.report__mode-stamp__value{ font-weight: 600; }
.report__mode-stamp__hint{ color: var(--muted); font-size: var(--fs-sm); }

/* =============================================================
   M.02 — FECHAMENTO MENSAL / SAÚDE FINANCEIRA CONTÍNUA
   Mesma família visual do painel financeiro (papel + borda + faixa à
   esquerda), porque é a continuação dele no tempo — não um bloco novo.
   ============================================================= */
/* ---- A SAÚDE DO NEGÓCIO, PROJETADA PELO CARDÁPIO ----
   Primeiro andar da frente da operação, desde 17/08. Veste a mesma moldura do
   fechamento do mês de propósito: são dois andares da MESMA leitura (a foto de
   hoje e o filme), e dar a cada um uma casca diferente diria que são assuntos
   diferentes. Os dois blocos que ela abriga (painel financeiro e ponto de
   equilíbrio) trazem a forma que já tinham no relatório — quem aprendeu a
   lê-los uma vez não reaprende porque eles mudaram de tela. */
.negocio{
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 22px 24px 20px;
  border-left: 3px solid var(--border-strong);
  display: flex; flex-direction: column; gap: 18px;
}
[hidden].negocio{ display: none !important; }
.negocio__head{ display: flex; flex-direction: column; }
.negocio__eyebrow{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 10px;
}
.negocio__title{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--ink);
  margin: 0 0 10px;
}
.negocio__lede{
  font-size: var(--fs-md); color: var(--muted); margin: 0; line-height: 1.55;
  max-width: 70ch;
}
/* Dentro da moldura os blocos não repetem moldura: no relatório eles eram
   cartões soltos numa coluna, aqui são andares de uma peça só. O traço de
   baixo do ponto de equilíbrio separava ele do bloco seguinte do relatório;
   como último andar daqui, ele vira um risco solto no pé da caixa. */
.negocio > .fin-panel, .negocio > .breakeven{ margin-top: 0; }
.negocio > .breakeven{ border-bottom: 0; padding-bottom: 0; }

/* No papel do mês o painel financeiro NÃO abre página nova. A regra geral
   (macro-seção começa em folha nova) foi escrita quando ele era um capítulo do
   relatório do cardápio, com outros capítulos antes; aqui ele é o primeiro
   andar da peça, e quebrar antes dele deixaria a abertura sozinha na folha 1. */
@media print{
  .negocio > .fin-panel{ page-break-before: auto; break-before: auto; }
}

/* A PASSAGEM, no fim do bloco de custos do relatório. É caminho, não conteúdo:
   linha sublinhada, sem caixa e sem cor de botão — vestida de bloco, ela
   competiria com o número que a pessoa acabou de destravar. */
.negocio-ponte{
  align-self: flex-start; border: 0; background: none; padding: 4px 0;
  cursor: pointer; font-family: inherit; font-size: var(--fs-sm); text-align: left;
  color: var(--muted); line-height: 1.5;
  border-bottom: 1px solid var(--border-strong);
}
[hidden].negocio-ponte{ display: none !important; }
.negocio-ponte b{ color: var(--ink); font-weight: 600; }
.negocio-ponte:hover{ color: var(--ink); border-bottom-color: var(--primary); }
.negocio-ponte:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }

.closes{
  margin-top: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 22px 24px 20px;
  border-left: 3px solid var(--border-strong);
}
.closes__sr{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.closes__head{ margin-bottom: 18px; }
.closes__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 10px;
}
/* Peso de frente, não de sub-bloco. Fica um degrau abaixo do h1 do cardápio
   (que é a porta de entrada e carrega a página), mas na mesma família — não
   mais no tamanho de um título interno de relatório. */
.closes__title{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--ink);
  margin: 0 0 10px;
}
.closes__lede{
  font-size: var(--fs-md); color: var(--muted); margin: 0; line-height: 1.55;
  max-width: 70ch;
}

/* --- Pequenos múltiplos: um indicador por painel --- */
/* --- Avisos da curva: o produto falando primeiro ---
   Fica acima dos gráficos e some inteiro quando não há nada a dizer. O ponto
   colorido carrega a gravidade, mas nunca sozinho: o texto do aviso diz o
   mesmo sem depender de enxergar a cor. */
/* Os avisos da curva viraram os achados do bloco "O que a sua curva diz",
   que reusa a casca .report-lede do relatório de cardápio de propósito: as
   duas frentes abrem igual, então quem aprende a ler uma leu as duas. O que
   sobra aqui é o ponto colorido de gravidade por achado — cor carrega a
   gravidade, mas nunca sozinha: o texto diz o mesmo sem depender dela. */
.closes__lede{ margin-bottom: 20px; }
.report-lede__finding[data-tone="red"]::before{ background: var(--danger); }
.report-lede__finding[data-tone="yellow"]::before{ background: var(--gold-deep); }
.report-lede__finding b{ font-variant-numeric: tabular-nums; }
/* Sem link de prova na curva: o gráfico que prova está logo abaixo, na mesma
   seção. Uma coluna só. */
.closes__lede .report-lede__finding{ grid-template-columns: 1fr; }
.report-lede__bridge{
  margin: 0; font-size: var(--fs-md); line-height: 1.5; color: var(--ink);
}

.closes__charts{
  /* Três painéis quando só há a leitura de custo; quatro quando o EBITDA
     fecha. auto-fit evita um quarto painel órfão numa segunda linha. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px;
  margin-bottom: 18px;
}
[hidden].closes__charts{ display: none !important; }
.closes__panel{
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.closes__panel-title{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60);
  margin: 0; font-weight: 500;
}
.closes__panel-value{
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-2xl); line-height: 1; letter-spacing: -0.02em;
  color: var(--ink); font-feature-settings: "lnum";
}
/* Estado contra a meta: bolinha + PALAVRA. Nunca só a cor — verde e vermelho
   não se separam na visão deuteranópica, que é justamente a mais comum. */
.closes__panel-state{
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--muted);
}
.closes__dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted); flex: none;
}
.closes__panel[data-estado="bom"] .closes__dot{ background: var(--positive); }
.closes__panel[data-estado="ruim"] .closes__dot{ background: var(--danger); }
.closes__panel-chart{ position: relative; margin-top: 4px; }
.spark{ width: 100%; height: 54px; display: block; overflow: visible; }
.spark__line{
  fill: none; stroke: var(--primary); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.spark__dot{ fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
/* A meta é referência, não série: tracejada e recessiva. O dourado da marca
   não alcança 3:1 sobre o papel, então ela SEMPRE vem com rótulo em texto —
   a linha sozinha nunca carrega o número. */
.spark__target{
  stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}
.closes__meta-label{
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.06em; color: var(--muted);
}
/* Variação mês a mês: seta + texto. A seta é o encoding que sobrevive à cor. */
.closes__delta{
  font-size: var(--fs-xs); color: var(--muted); margin-top: 2px;
}
.closes__delta[data-bom="1"]{ color: var(--positive); }
.closes__delta[data-bom="0"]{ color: var(--danger); }

/* --- Repouso --- */
.closes__empty{
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: 18px 20px; margin-bottom: 18px;
  background: var(--surface);
}
[hidden].closes__empty{ display: none !important; }
.closes__empty-text{ margin: 0; font-size: var(--fs-sm); color: var(--muted); }
/* A base do percentual do mês — mesma voz e mesmo peso da linha equivalente
   na semana, porque é a mesma régua dita no mesmo lugar da leitura. */
.closes__base{
  margin: 12px 0 0; font-size: var(--fs-xs); line-height: 1.45;
  color: var(--primary-60);
}

/* --- Convite ao fechamento --- */
/* --- A ponte: fim do relatório → segunda frente --- */
/* Mora no fim do bloco de resultado e some do PDF. Peso de convite, não de
   alerta: quem chegou até aqui já está engajado, não precisa ser empurrado. */
.bridge[hidden]{ display: none !important; }
.bridge{
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--r-md);
  background: var(--primary-04);
}
.bridge__txt{ display: flex; flex-direction: column; gap: 5px; min-width: 260px; flex: 1 1 380px; }
.bridge__title{
  font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink);
}
.bridge__lede{ font-size: var(--fs-md); color: var(--muted); line-height: 1.55; max-width: 62ch; }
.bridge__cta{
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 11px 22px;
  border: 1px solid var(--primary);
  border-radius: var(--r-sm);
  background: var(--primary); color: #fff;
  font-size: var(--fs-md); font-weight: 600;
  cursor: pointer;
  transition: opacity .18s var(--ease);
}
.bridge__cta:hover{ opacity: 0.88; }
.bridge__cta:focus-visible{ outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 640px){
  .bridge{ padding: 16px 18px; }
  .bridge__cta{ width: 100%; justify-content: center; }
}

/* Em repouso, o bloco inteiro se resume a estes botões. Os cinco campos de
   dinheiro só entram na tela quando a pessoa pede. */
.closes__entries{ display: flex; gap: 10px; flex-wrap: wrap; }
.closes__entries[hidden]{ display: none !important; }
/* A porta da planilha é secundária no peso, não no lugar: quem já tem a
   série pronta precisa vê-la sem procurar, mas quem tem um mês só na cabeça
   continua indo pelo caminho curto. */
.closes__open--quiet{ font-weight: 500; color: var(--muted); }
.closes__open--quiet:hover{ color: var(--ink); }
.closes__open[hidden]{ display: none !important; }
.closes__open{
  display: inline-flex; align-items: center;
  padding: 10px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-md); font-weight: 600;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.closes__open:hover{ border-color: var(--primary); background: var(--primary-04); }
.closes__open:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }

/* --- Formulário de fechamento --- */
[hidden].closes__form{ display: none !important; }
.closes__form{
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.closes__form-title{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 12px;
}
.closes__fields{
  /* Cinco campos desde que o EBITDA entrou. auto-fit acomoda o quinto sem
     deixá-lo sozinho numa linha só dele em telas médias. O mínimo era 148px
     e, com a linha de ajuda de cada campo, virava coluna de três palavras por
     linha — o formulário de fechar mês saiu "quebrado" na auditoria de
     15/09. 200px dá quatro campos por linha no monitor e a ajuda cabe. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px 16px;
}
.closes__field{ display: flex; flex-direction: column; gap: 6px; }
.closes__field-label{
  font-size: var(--fs-xs); color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
/* A explicação do termo (aplicarLingua pendura um <small> dentro do rótulo)
   é linha inteira, embaixo — como item de flex ela virava uma torre de texto
   ao LADO do rótulo. */
.closes__field-label .termo__explica{ flex: 1 1 100%; }
/* Linha auxiliar do campo: diz o que entra ali, na língua do fechamento que
   o dono já faz. Só onde a dúvida é real — os outros campos se explicam. */
.closes__field-hint{
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.4;
}
.closes__field-opt, .closes__field-req{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60);
}
.closes__money{ position: relative; display: block; }
.closes__money-prefix{
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  pointer-events: none;
}
.closes__input{
  width: 100%; height: 40px; padding: 0 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink); font-size: var(--fs-md);
  transition: border-color .15s var(--ease);
}
.closes__input--money{ padding-left: 34px; font-family: var(--font-mono); }
.closes__input:hover{ border-color: var(--border-strong); }
.closes__input:focus{ border-color: var(--primary); background: #fff; outline: none; }
.closes__actions{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px;
}
.closes__form-hint{ font-size: var(--fs-xs); color: var(--muted); }
.closes__error{
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--danger); border-radius: var(--r-md);
  background: var(--danger-bg); color: var(--danger);
  font-size: var(--fs-sm);
}
[hidden].closes__error{ display: none !important; }

/* --- Meses em lote: a planilha que ele já mantém --- */
[hidden].closes__bulk{ display: none !important; }
.closes__bulk{
  border-top: 1px solid var(--border);
  margin-top: 18px; padding-top: 18px;
}
.closes__bulk-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.closes__bulk-head .closes__form-title{ margin-bottom: 0; }
.closes__bulk-help{
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.6;
  margin: 0 0 14px; max-width: 72ch;
}
.closes__bulk-help code{
  font-family: var(--font-mono); font-size: var(--fs-sm);
  background: var(--primary-04); padding: 1px 5px; border-radius: 3px;
}
.closes__drop{
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 24px 20px; margin-bottom: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer; text-align: center;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.closes__drop:hover,
.closes__drop.is-over{ border-color: var(--primary); background: var(--primary-04); }
.closes__drop-title{ color: var(--ink); font-size: var(--fs-md); font-weight: 600; }
.closes__drop-sub{ color: var(--muted); font-size: var(--fs-sm); }
.closes__paste{
  width: 100%; box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6;
  resize: vertical;
}
.closes__paste:focus-visible{ outline: 2px solid var(--primary); outline-offset: 1px; }
.closes__bulk-sheets{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--primary-04);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
[hidden].closes__bulk-sheets{ display: none !important; }
.closes__bulk-sheets-label{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--primary);
}
.closes__bulk-sheets-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
[hidden].closes__bulk-preview{ display: none !important; }
.closes__bulk-preview{ margin-top: 16px; }
.closes__bulk-summary{
  font-size: var(--fs-sm); color: var(--ink); margin-bottom: 10px; line-height: 1.55;
}
.closes__bulk-table-wrap{ overflow-x: auto; }
.closes__table--preview{ margin-top: 0; }
/* Linha que não vai entrar: legível sem depender da cor — a coluna
   "Situação" diz o motivo por escrito. */
.closes__bulk-row[data-ok="0"]{ opacity: 0.55; }
.closes__bulk-flag{
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.03em; color: var(--muted);
}
.closes__bulk-flag[data-tone="ok"]{ color: var(--primary); }
.closes__bulk-flag[data-tone="bad"]{ color: var(--danger); }
.closes__bulk-flag[data-tone="warn"]{ color: var(--ink); }
.closes__bulk-actions{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 14px;
}

/* --- Tabela: onde ele corrige, e a leitura em número da mesma curva --- */
.closes__table-wrap{ margin-top: 20px; overflow-x: auto; }
[hidden].closes__table-wrap{ display: none !important; }
.closes__table{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.closes__table-caption{
  text-align: left; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-60);
  margin-bottom: 8px;
}
.closes__table th, .closes__table td{
  padding: 9px 10px; border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap;
}
.closes__table thead th{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60); font-weight: 500;
}
.closes__table tbody th{ font-weight: 600; color: var(--ink); }
.closes__num{ text-align: right; font-family: var(--font-mono); }
.closes__row-actions{ text-align: right; }
/* NO PAPEL A COLUNA DE AÇÕES NÃO EXISTE.
   O PDF do mês sai da mesma tela, e a tabela de meses fechados estava
   imprimindo "editar" e "remover" em cada linha — botões de tela num documento
   que o dono leva pra reunião de sócio. Os irmãos dessa coluna (insumo, caixa,
   semana) já tinham `no-print` no botão; a de meses nunca teve.
   A regra esconde a CÉLULA inteira, cabeçalho junto, e não só o botão: matar
   só o botão deixaria uma coluna vazia puxando a tabela pra direita. */
@media print{
  .closes__row-actions{ display: none !important; }
}
.closes__link{
  font-size: var(--fs-xs); color: var(--primary);
  border-bottom: 1px solid transparent; margin-left: 10px;
}
.closes__link:hover{ border-color: var(--accent); }
.closes__link--quiet{ color: var(--muted); }
/* Armado: o 2º clique remove. Vira palavra diferente, não só cor. */
.closes__link--armed{ color: var(--danger); font-weight: 600; }

@media (max-width: 860px){
  .closes__charts{ grid-template-columns: 1fr; }
  .closes__fields{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .closes{ padding: 18px 16px; }
  .closes__fields{ grid-template-columns: 1fr; }
  .closes__input{ min-height: 44px; }
  .closes__link{ display: inline-block; min-height: 44px; line-height: 44px; }
}

/* Mês de referência do número em destaque — só aparece quando o mês mais
   recente não trouxe esse dado, pra não ler valor velho como se fosse de agora. */
.closes__panel-ref{
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.05em; color: var(--muted);
}

/* =============================================================
   SELETOR DE CASA (unidades)
   Nasce escondido: só existe na tela de quem tem duas ou mais.
   ============================================================= */
.unitpicker{ position: relative; }
[hidden].unitpicker{ display: none !important; }
.unitpicker__trigger{
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--paper);
  font-size: var(--fs-sm); color: var(--ink);
  max-width: 200px;
}
.unitpicker__trigger:hover{ border-color: var(--border-strong); }
.unitpicker__label{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.unitpicker__chevron{ flex: none; color: var(--muted); }
.unitpicker__pop{
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 240px; max-width: 300px;
  background: #fff;
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 4px; z-index: 60;
}
[hidden].unitpicker__pop{ display: none !important; }
.unitpicker__list{ max-height: 260px; overflow-y: auto; }
.unitpicker__item{
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--ink);
}
.unitpicker__item:hover{ background: var(--primary-04); }
/* A casa aberta agora fica marcada com barra + peso, não só com fundo:
   fundo sozinho some em tela clara e no sol do salão. */
.unitpicker__item.is-active{
  background: var(--primary-04);
  box-shadow: inset 2px 0 0 var(--accent);
  font-weight: 600;
}
.unitpicker__item-locale{ font-size: var(--fs-xs); color: var(--muted); }
/* A linha da casa carrega dois gestos: entrar (o nome, que ocupa a linha
   inteira) e ajustar (à direita). "Ajustar" fica discreto até o mouse chegar
   na linha — presente pra quem procura, sem competir com a escolha da casa,
   que é o que 9 em 10 aberturas do seletor querem. No toque não há hover:
   ali ele é visível sempre, porque no celular não existe "descobrir passando
   por cima". */
.unitpicker__row{ display: flex; align-items: stretch; gap: 2px; }
.unitpicker__row .unitpicker__item{ flex: 1 1 auto; min-width: 0; }
.unitpicker__edit{
  flex: 0 0 auto; align-self: center;
  padding: 6px 8px; border-radius: var(--r-md);
  font-size: var(--fs-xs); color: var(--muted);
  opacity: 0; transition: opacity .12s ease, color .12s ease;
}
.unitpicker__row:hover .unitpicker__edit,
.unitpicker__edit:focus-visible{ opacity: 1; }
.unitpicker__edit:hover{ color: var(--primary); background: var(--primary-04); }
@media (hover: none){ .unitpicker__edit{ opacity: 1; } }
.unitpicker__divider{ height: 1px; background: var(--border); margin: 4px 0; }
.unitpicker__add{
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--primary);
}
.unitpicker__add:hover{ background: var(--primary-04); }

@media (max-width: 560px){
  .unitpicker__trigger{ min-height: 44px; max-width: 140px; }
  .unitpicker__item, .unitpicker__add, .unitpicker__edit{ min-height: 44px; }
}

/* =============================================================
   VISÃO DE REDE
   Duas altitudes na mesma tela: o consolidado que o gestor leva pra
   cima e o ranking sobre o qual ele age. Nasce escondida — conta com
   uma casa só nunca vê.
   ============================================================= */
.network{
  margin: 0 0 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 22px 24px 20px;
  border-left: 3px solid var(--accent);
}
[hidden].network{ display: none !important; }
.network__head{ margin-bottom: 16px; }
.network__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 8px;
}
.network__title{
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-xl); letter-spacing: -0.015em; color: var(--ink); margin: 0;
}

/* --- Consolidado --- */
.network__kpis{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.network__kpi{
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.network__kpi:last-child{ border-right: 0; }
.network__kpi-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60);
}
.network__kpi-value{
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-2xl); line-height: 1; letter-spacing: -0.02em;
  color: var(--ink); font-feature-settings: "lnum";
}
/* Estado sai em PALAVRA; a bolinha só acompanha. Mesma razão do painel
   mensal: verde e vermelho não se separam na visão deuteranópica. */
.network__kpi-state{
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); color: var(--muted);
}
.network__dot{
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--muted);
}
.network__kpi[data-estado="bom"] .network__dot{ background: var(--positive); }
.network__kpi[data-estado="ruim"] .network__dot{ background: var(--danger); }
.network__coverage{
  margin: 10px 0 0; font-size: var(--fs-xs); color: var(--muted);
}

/* --- Fora da curva --- */
.network__alerts{
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface);
}
[hidden].network__alerts{ display: none !important; }
.network__alerts-title{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 6px;
}
.network__alerts-list{ margin: 0; padding: 0; list-style: none; }
.network__alerts-list li{
  font-size: var(--fs-sm); color: var(--ink); padding: 3px 0;
}

/* --- Ranking --- */
.network__table-wrap{ margin-top: 18px; overflow-x: auto; }
.network__table{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.network__table-caption{
  text-align: left; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary-60);
  margin-bottom: 8px;
}
.network__table th, .network__table td{
  padding: 10px; border-bottom: 1px solid var(--border);
  text-align: left; white-space: nowrap;
}
.network__table thead th{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60); font-weight: 500;
}
.network__table tbody th{ font-weight: 600; }
.network__unit-name{ display: block; color: var(--ink); }
/* O nome da casa é botão quando não é a casa aberta: mesmo desenho, cursor de
   mão e sublinhado ao passar — a tabela vira porta sem virar formulário. */
.network__unit-btn{
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; text-align: left; color: inherit;
}
.network__unit-btn:hover .network__unit-name, .network__unit-btn:focus-visible .network__unit-name{ text-decoration: underline; color: var(--brand); }
.network__table tr[aria-current="true"] th{ box-shadow: inset 3px 0 0 var(--brand); }
/* No Início a rede vem antes de tudo; o respiro abaixo separa da decisão do dia. */
.network--inicio{ margin-bottom: 28px; }
.network__unit-locale{
  display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--muted);
}
.network__num{ text-align: right; font-family: var(--font-mono); }
.network__delta{ font-size: var(--fs-xs); margin-left: 4px; }
.network__delta[data-bom="1"]{ color: var(--positive); }
.network__delta[data-bom="0"]{ color: var(--danger); }
.network__pending{
  margin: 14px 0 0; font-size: var(--fs-sm); color: var(--muted);
}
[hidden].network__pending{ display: none !important; }

@media (max-width: 860px){
  .network__kpis{ grid-template-columns: 1fr 1fr; }
  .network__kpi:nth-child(2n){ border-right: 0; }
  .network__kpi:nth-child(-n+2){ border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px){
  .network{ padding: 18px 16px; }
  .network__kpis{ grid-template-columns: 1fr; }
  .network__kpi{ border-right: 0; border-bottom: 1px solid var(--border); }
  .network__kpi:last-child{ border-bottom: 0; }
}

/* ============================================================
   MINHA OPERAÇÃO — o cadastro da casa

   Reusa o idiom de campo do painel financeiro (.fin-field) de propósito: é o
   mesmo gesto de preencher um número sobre o negócio, e inventar uma segunda
   linguagem visual pra ficha faria a tela parecer de outro produto.
   ============================================================ */

.modal--unit{ max-width: 620px; }

.unitform{ display: flex; flex-direction: column; gap: 20px; }

.unitform__group{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 16px;
}
/* O primeiro grupo não ganha a linha divisória — ela separaria o título do
   modal do conteúdo, e ali já existe a borda do cabeçalho. */
.unitform__group + .unitform__group{
  padding-top: 18px; border-top: 1px dashed var(--border);
}
.unitform__group[hidden]{ display: none !important; }

.unitform__group-title{
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}

/* O TICKET POR TURNO — a gaveta dentro do grupo "Como você compete".
   Ocupa a linha inteira do grid de 2 colunas: são três linhas de dois campos,
   e espremê-las numa coluna faria o número ficar num campo de 3 dígitos. */
.unitform__turnos{ grid-column: 1 / -1; }
.unitform__turnos-abrir{
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-sm); padding: 5px 12px; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--primary-60);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.unitform__turnos-abrir:hover{ border-color: var(--border-strong); color: var(--ink); }
.unitform__turnos-abrir[aria-expanded="true"]{ color: var(--ink); border-color: var(--border-strong); }
.unitform__turnos-corpo{ margin-top: 12px; }
.unitform__turnos-corpo[hidden]{ display: none !important; }
.unitform__turnos-lede{
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; margin: 0 0 12px;
}
.unitform__turnos-grade{
  display: grid; grid-template-columns: minmax(72px, 0.7fr) 1fr 1fr;
  gap: 8px 12px; align-items: center;
}
.unitform__turnos-cabeca{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.unitform__turnos-nome{ font-size: var(--fs-sm); color: var(--ink); }
/* A conta aparece só quando há o que contar — média ponderada sem movimento
   declarado não é média ponderada, e a linha diz isso em vez de fingir. */
.unitform__turnos-conta{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted);
  font-variant-numeric: tabular-nums; line-height: 1.5;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--border);
}
.unitform__turnos-conta[hidden]{ display: none !important; }

.unitform__note{
  grid-column: 1 / -1; margin: -4px 0 0;
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.45;
}
[hidden].unitform__note{ display: none !important; }

.unitform__field--wide{ grid-column: 1 / -1; }

/* ------------------------------------------------------------------ */
/* ACHAR A CASA ANTES DE CRIAR OUTRA                                    */
/*                                                                      */
/* A base já conhece milhares de casas de São Paulo. Quando a do dono é */
/* uma delas e ele digita o nome do próprio jeito, o cardápio dele nasce*/
/* numa linha separada — o mesmo restaurante duas vezes no mercado, e a */
/* mediana do bairro contando a casa dele em dobro.                     */
/* ------------------------------------------------------------------ */
.achacasa{ display: flex; flex-direction: column; gap: 5px; }
.achacasa__lista{ display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.achacasa__lista:empty{ display: none; }
.achacasa__item{
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 9px 12px; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); color: var(--ink);
  transition: border-color .12s ease;
}
.achacasa__item:hover{ border-color: var(--primary); }
.achacasa__item-meta{ margin-left: auto; font-size: var(--fs-xs); color: var(--muted); text-align: right; }
/* O nome à esquerda ganha a rua embaixo: entre doze casas com o mesmo nome no
   mesmo bairro (as redes), o endereço é a única coisa que diz qual é a dela. */
.achacasa__item-nome{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.achacasa__item-rua{ font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achacasa__vazio{ font-size: var(--fs-sm); color: var(--muted); margin: 8px 0 0; }

/* O estado em que nada vai duplicar. */
.achacasa__achou{
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--ok, #3F7A4E); background: rgba(63,122,78,0.08);
  border-radius: var(--r-sm); padding: 12px 14px;
}
[hidden].achacasa__achou{ display: none !important; }
.achacasa__rot{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ok, #3F7A4E);
}
.achacasa__nome{ font-size: var(--fs-lg); }
.achacasa__meta{ font-size: var(--fs-xs); color: var(--muted); }
.achacasa__acoes{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.achacasa__ajuste{ display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
[hidden].achacasa__ajuste{ display: none !important; }
.achacasa__eco{ font-size: var(--fs-sm); color: var(--muted); margin: 4px 0 0; }
.achacasa__eco--ok{ color: var(--ok, #3F7A4E); }
.achacasa__eco--bad{ color: var(--drop, #A23B2C); }
.btn--sm{ padding: 6px 12px; font-size: var(--fs-sm); }

/* Marca de procedência da meta. Sai em palavra, não em cor: "herdada do
   grupo" precisa ser lida, não decodificada. */
.unitform__inherited{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted);
}

.unitform__archived{
  grid-column: 1 / -1; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.unitform__archived li{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: var(--fs-sm); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 11px;
}
.unitform__archived-locale{ color: var(--muted); font-size: var(--fs-xs); }
.unitform__archived-btn{
  border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--r-sm); padding: 4px 9px; cursor: pointer;
  font-size: var(--fs-xs); color: var(--ink); flex: none;
}
.unitform__archived-btn:hover{ border-color: var(--primary); }

/* O que ainda falta na ficha. Não é erro (nada quebrou) nem enfeite: é a
   consequência em aberto. Fica em nota discreta, no alto, e some sozinha
   quando a ficha completa. */
.unitform__falta{
  border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--r-sm); padding: 10px 13px; background: var(--surface-2, transparent);
}
[hidden].unitform__falta{ display: none !important; }
.unitform__falta-title{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 6px;
}
.unitform__falta-list{
  margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px;
  font-size: var(--fs-sm); color: var(--muted); line-height: 1.45;
}
.unitform__falta-list b{ color: var(--ink); font-weight: 600; }

/* O ENDEREÇO VIRANDO PONTO. Bloco discreto por decisão: quando dá certo, é uma
   linha de confirmação e nada mais; a lista de candidatos só existe enquanto o
   dono precisa escolher entre duas ruas de mesmo nome. */
.endereco{ display: flex; flex-direction: column; gap: 7px; margin-top: -4px; }
[hidden].endereco{ display: none !important; }
.endereco__status{
  margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted);
}
.endereco__status--ok{ color: var(--ink); }
.endereco__status--ok b{ font-weight: 600; }
.endereco__opcoes{ display: flex; flex-direction: column; gap: 5px; }
.endereco__opcoes:empty{ display: none; }
.endereco__opcao{
  text-align: left; font: inherit; font-size: var(--fs-sm); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: transparent; padding: 8px 11px; cursor: pointer; line-height: 1.4;
}
.endereco__opcao:hover, .endereco__opcao:focus-visible{
  border-color: var(--primary); background: var(--surface-2, transparent);
}

.unitform__error{
  font-size: var(--fs-sm); color: var(--danger);
  border: 1px solid var(--danger); border-radius: var(--r-sm); padding: 9px 12px;
}
[hidden].unitform__error{ display: none !important; }

/* Arquivar fica na ponta oposta de salvar: é um gesto de outra natureza, e
   colá-lo nos botões de confirmação convida ao clique errado. */
.unitform__foot{ display: flex; align-items: center; gap: 8px; }
.unitform__foot-gap{ flex: 1 1 auto; }
[hidden].unitform__archive{ display: none !important; }
/* Excluir é o único gesto sem volta desta tela — e o único que se pinta de
   alerta. Arquivar continua neutro de propósito: ele não perde nada. */
#unit-modal-delete{ color: var(--danger); }
#unit-modal-delete:hover{ background: var(--danger-bg); }

@media (max-width: 560px){
  .unitform__group{ grid-template-columns: 1fr; }
  /* No celular a coluna do nome do turno vira linha própria: três colunas num
     telefone deixariam "Jantar / noite" quebrando em três linhas ao lado de
     dois campos de um dígito de largura. */
  .unitform__turnos-grade{ grid-template-columns: 1fr 1fr; }
  .unitform__turnos-nome{ grid-column: 1 / -1; margin-top: 6px; }
  .unitform__turnos-cabeca:first-child{ display: none; }
  /* Confirmar e desistir continuam lado a lado; arquivar desce pra própria
     linha, longe do polegar que acabou de confirmar. */
  .unitform__foot{ flex-wrap: wrap; }
  .unitform__foot-gap{ display: none; }
  .unitform__archive{ order: 3; width: 100%; }
  #unit-modal-cancel{ margin-left: auto; }
}

/* ---------- Grupos do relatório (hierarquia de leitura) ----------
   O relatório tem 18 blocos e antes eles eram todos irmãos — cinco respondiam
   "meu preço está certo?" lado a lado, sem nenhum dizer qual era A resposta.
   O grupo é a camada que faltava: um título de pergunta, a resposta canônica
   em `__main`, e o resto sob "A conta por trás" em `__evidence`.

   O invólucro é deliberadamente sem caixa: fundo, borda e sombra continuam nos
   blocos internos. Se o grupo virasse mais um cartão, teríamos resolvido
   confusão de hierarquia criando confusão de moldura — dois níveis de caixa
   competindo pela mesma atenção. O que separa aqui é espaço e tipografia. */
.report-group{
  display: block;
  margin: 0 0 8px;
}
.report-group[hidden]{ display: none !important; }
/* A escada de preços sai da TELA (design de informação, 15/09: é a coluna
   "seu preço" desenhada de novo, sem o mercado — o degrau lê melhor como
   frase). Continua no PDF, que é documento, até a frase existir. */
@media screen{ #pricestair{ display: none !important; } }
/* O CORTE DA ABA PRATOS (design de informação, 15/09) — o que sai da TELA e
   fica no PDF, com o destino de cada ressalva:
   · #rangechart (seu preço na faixa): a posição de cada prato já está na
     lista de pratos (seu preço · mediana · dif.); a ressalva de amostra
     mora em cada linha.
   · #pricegiro (preço × giro): observação, não decisão — a matriz carrega a
     decisão. Segue no papel.
   · #portfolio-block (tamanho do cardápio): vira a linha "N pratos ·
     mediana da região M" nos contadores do topo (renderResultChips).
   · #revenue-block (espaço de reprecificação): repetia o cartão do topo; o
     campo de pessoas/dia abre no próprio cartão (abrirPaxInline), a nota do
     mês médio e a ressalva "não é projeção" vão pro cartão (summary-opp).
   · #priority-section: só na tela quando há mais de três ações (o topo já
     lista três); o quadrante fica no papel, a ordem numerada fica na tela.
   · #pricediag: os cinco cartões viram cinco linhas (.pricediag__lista); os
     cartões inteiros seguem no papel. */
@media screen{
  #rangechart, #pricegiro, #portfolio-block, #revenue-block{ display: none !important; }
  #priority-section[data-so-papel="1"]{ display: none !important; }
  #priority-section .priority-chart,
  #priority-section .priority-list,
  #priority-section .priority-section__lede{ display: none !important; }
  #priority-section .priority-roadmap{ margin-top: 0; padding-top: 0; border-top: 0; }
  .pricediag__grid{ display: none !important; }
  .pricediag__lede{ display: none !important; }
  /* Evidência que só existe no papel não ganha rótulo na tela. */
  .report-group__evidence[data-so-papel="1"]{ display: none !important; }
}
@media print{ .pricediag__lista{ display: none !important; } }
/* A LINHA DE PRATO FECHADA (auditoria de 15/09, molde "lista de itens"): na
   tela a linha nasce baixa — nome, preços, diferença, vendas e a frase da
   leitura — e abre no toque em qualquer ponto dela: a descrição, a régua, os
   botões de margem e descrição, a leitura completa e as notas de porção. No
   papel sai tudo aberto. O grupo da matriz (símbolo + palavra) fica embaixo
   do preço quando a matriz classificou o prato. */
@media screen{
  .row:not(.is-aberta) .reco-mais,
  .row:not(.is-aberta) .item-desc,
  .row:not(.is-aberta) .sell-desc,
  .row:not(.is-aberta) .cell--item__controls,
  .row:not(.is-aberta) .regua,
  .row:not(.is-aberta) .price-per-unit,
  .row:not(.is-aberta) .price-mismatch,
  .row:not(.is-aberta) .reco > em{ display: none !important; }
  .cell{ min-height: 56px; padding: 12px 16px; }
  .row .cell--item{ position: relative; padding-right: 28px; }
  .row .cell--item::after{
    content: ""; position: absolute; right: 10px; top: 22px; width: 7px; height: 7px;
    border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
    transform: rotate(-45deg); transition: transform .15s var(--ease);
  }
  .row.is-aberta .cell--item::after{ transform: rotate(45deg); }
}
.item-sub{ display: none; font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.cell--price{ flex-direction: column; align-items: flex-end; gap: 3px; }
.item-quad{ display: none; font-size: var(--fs-2xs); color: var(--muted); white-space: nowrap; }
.item-quad[data-quad]:not([data-quad=""]){ display: inline-flex; align-items: center; gap: 4px; }
.item-quad__icone{ font-size: 0.85em; }
.item-quad[data-quad="star"]{ color: var(--positive-deep); }
.item-quad[data-quad="dog"]{ color: var(--danger); }
@media (max-width: 720px){
  /* Duas colunas: nome com a linha "Região R$ 34 · você 15% abaixo"; preço com
     o grupo da matriz. Mediana e diferença moram na linha de baixo. */
  .table__head-row, .row{ grid-template-columns: minmax(0, 1fr) 92px !important; }
  .th--price:nth-of-type(3), .cell--price:nth-of-type(3), .th--delta, .cell--delta{ display: none !important; }
  .item-sub{ display: block; }
  .row .cell--item::after{ display: none; }
}
.reco-mais__toggle{
  display: block; margin-top: 6px; background: none; border: none; padding: 0;
  font: inherit; font-size: var(--fs-xs); color: var(--muted); cursor: pointer;
  border-bottom: 1px solid var(--border-strong);
}
.reco-mais__toggle:hover{ color: var(--ink); }
.reco-mais{ margin-top: 8px; }
/* As linhas do diagnóstico de preço, na tela. */
.pricediag__lista{ display: flex; flex-direction: column; }
.pricediag__linha{ border-top: 1px solid var(--border); }
.pricediag__linha:last-child{ border-bottom: 1px solid var(--border); }
.pricediag__linha-cabeca{
  list-style: none; cursor: pointer; padding: 12px 0;
  display: grid; grid-template-columns: 11rem 1fr auto; gap: 2px 16px; align-items: baseline;
}
.pricediag__linha-cabeca::-webkit-details-marker{ display: none; }
.pricediag__linha-nome{ font-weight: 600; color: var(--ink); font-size: var(--fs-sm); }
.pricediag__linha-medida{ font-size: var(--fs-sm); color: var(--ink); }
.pricediag__linha-medida b{ font-variant-numeric: tabular-nums; }
.pricediag__linha-leitura{ grid-column: 2; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.pricediag__linha-abrir{
  grid-column: 3; grid-row: 1; font-size: var(--fs-xs); color: var(--muted);
  border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.pricediag__linha[open] .pricediag__linha-abrir{ color: var(--ink); }
.pricediag__linha-corpo{ padding: 0 0 16px; max-width: 64ch; }
.pricediag__linha-corpo .pricediag__what{ margin: 0 0 10px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.pricediag__linha-corpo .pricediag__block, .pricediag__linha-corpo .pricediag__do{ margin-top: 10px; }
@media (max-width: 720px){
  .pricediag__linha-cabeca{ grid-template-columns: 1fr auto; }
  .pricediag__linha-medida, .pricediag__linha-leitura{ grid-column: 1 / -1; }
  .pricediag__linha-abrir{ grid-column: 2; }
}
/* AS ABAS: na tela só o grupo da aba aberta fica; no papel sai tudo. */
@media screen{
  #result[data-aba="pratos"] .report-group[data-aba]:not([data-aba="pratos"]),
  #result[data-aba="matriz"] .report-group[data-aba]:not([data-aba="matriz"]),
  #result[data-aba="concorrentes"] .report-group[data-aba]:not([data-aba="concorrentes"]),
  #result[data-aba="custos"] .report-group[data-aba]:not([data-aba="custos"]){ display: none !important; }
}

.report-group__head{
  margin: 40px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.report-group__title{
  font-family: var(--font-display);
  font-size: var(--fs-xl); line-height: 1.2; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 6px;
}
.report-group__lede{
  margin: 0; max-width: 66ch;
  font-size: var(--fs-md); line-height: 1.55; color: var(--muted);
}

/* A evidência recua. O deslocamento à esquerda com o fio vertical é o que diz
   "isto pertence ao bloco de cima" sem precisar de mais uma palavra. */
.report-group__evidence{
  margin: 4px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--border);
}
.report-group__evidence[hidden]{ display: none !important; }
.report-group__evidence-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted);
  margin: 14px 0 10px;
}

@media (max-width: 720px){
  .report-group__head{ margin: 28px 0 14px; }
  .report-group__title{ font-size: var(--fs-xl); }
  /* No celular o recuo come largura de tela que os gráficos precisam; o
     rótulo sozinho já carrega a subordinação. */
  .report-group__evidence{ padding-left: 0; border-left: 0; }
}

/* No PDF o grupo vira estrutura de documento: o título ganha respiro e não se
   desgruda do primeiro bloco que ele encabeça. */
@media print{
  .report-group__head{
    margin: 22px 0 12px;
    break-after: avoid; page-break-after: avoid;
  }
  .report-group__title{ font-size: 1.18rem; }
  .report-group__evidence{ padding-left: 0; border-left: 0; }

  /* O PRIMEIRO bloco de cada grupo não abre página. As macro-seções pedem
     page-break-before desde antes dos grupos existirem (.reco-table,
     .pricediag, #fin-panel...), e o título do grupo vem ANTES delas: o
     resultado era uma folha em branco com só o cabeçalho, e o conteúdo dele
     na seguinte. Quem quebra a página passa a ser o bloco seguinte, não o
     primeiro — o título viaja junto com aquilo que ele encabeça. */
  .report-group__main > *:first-child,
  .report-group__evidence-body > *:first-child{
    break-before: auto !important; page-break-before: auto !important;
  }
}

/* ============================================================
   O CARDÁPIO, CASA A CASA

   Mesma moldura da visão de rede — é a outra metade da mesma pergunta ("como
   estão as minhas casas"), e dar a ela uma linguagem própria faria parecer
   outro produto.
   ============================================================ */

.netmenu{
  margin: 0 0 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 22px 24px 20px;
  border-left: 3px solid var(--accent);
}
[hidden].netmenu{ display: none !important; }

.netmenu__head{ margin-bottom: 16px; }
.netmenu__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 8px;
}
.netmenu__title{
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-xl); letter-spacing: -0.015em; color: var(--ink); margin: 0;
}
/* A regra da leitura vive na tela, não só na nossa cabeça: sem ela, o dono lê
   duas colunas de preço e conclui sozinho o que a tela recusa a dizer. */
.netmenu__lede{
  margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted);
  max-width: 62ch;
}

/* --- O que pede decisão --- */
.netmenu__signals{
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 14px 16px; margin-bottom: 18px; background: var(--surface);
}
[hidden].netmenu__signals{ display: none !important; }
.netmenu__signals-title{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 9px;
}
.netmenu__signals-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.netmenu__signal{
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink);
  padding-left: 11px; border-left: 2px solid var(--border-strong);
}
/* Os dois sinais são de naturezas diferentes e resolvem-se com gente
   diferente: posição é decisão de preço, custo é conversa de compra. */
.netmenu__signal[data-tipo="custo"]{ border-left-color: var(--accent); }

.netmenu__ok{
  margin: 0 0 18px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
}
[hidden].netmenu__ok{ display: none !important; }

/* --- A matriz prato × casa --- */
.netmenu__table-wrap{ overflow-x: auto; }
.netmenu__table{
  width: 100%; border-collapse: collapse; font-size: var(--fs-sm);
  min-width: 520px;
}
.netmenu__table-caption{
  caption-side: top; text-align: left;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60);
  padding-bottom: 8px;
}
.netmenu__table th, .netmenu__table td{
  text-align: left; padding: 11px 12px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.netmenu__table thead th{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--primary-60); font-weight: 400;
  border-bottom: 1px solid var(--border-strong);
}
.netmenu__col-name{ display: block; }
.netmenu__col-locale{
  display: block; text-transform: none; letter-spacing: 0;
  font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px;
}

.netmenu__dish{ font-weight: 500; color: var(--ink); }
.netmenu__dish-name{ display: block; }
.netmenu__dish-alias{
  display: block; margin-top: 3px;
  font-size: var(--fs-xs); color: var(--muted); font-weight: 400;
}
/* A linha que pede decisão ganha peso, não cor: a cor teria que significar
   "ruim", e posição divergente não é ruim — é uma escolha a fazer. */
.netmenu__table tr.is-sinal .netmenu__dish-name{ font-weight: 650; }
.netmenu__table tr.is-sinal{ background: var(--surface); }

.netmenu__cell{ font-variant-numeric: tabular-nums; }
.netmenu__price{ display: block; font-family: var(--font-mono); color: var(--ink); }
/* A posição sai em PALAVRA, sem cor — mesma disciplina do painel mensal. Pintar
   "acima da região" de vermelho diria que a casa está errada, e é justamente o
   que esta tela recusa a afirmar: estar acima da região pode ser a posição
   certa. Quem tem juízo aqui é o bloco de sinais, e ele fala em frase. */
.netmenu__pos{ display: block; font-size: var(--fs-xs); margin-top: 3px; color: var(--muted); }
.netmenu__cost{
  display: block; font-size: var(--fs-xs); margin-top: 2px;
  font-family: var(--font-mono); color: var(--muted);
}
.netmenu__cell--ausente{ color: var(--border-strong); }

/* --- O que só uma casa serve --- */
.netmenu__solo{ margin-top: 16px; }
[hidden].netmenu__solo{ display: none !important; }
.netmenu__solo-summary{
  cursor: pointer; font-size: var(--fs-sm); color: var(--muted);
  padding: 6px 0; list-style: revert;
}
.netmenu__solo-list{
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--fs-sm); color: var(--ink);
}

.netmenu__pending{ margin: 14px 0 0; font-size: var(--fs-sm); color: var(--muted); }
[hidden].netmenu__pending{ display: none !important; }

/* O aviso de arrastar só existe onde a matriz não cabe. No desktop as colunas
   cabem, e o aviso viraria instrução para um gesto desnecessário. */
.netmenu__swipe{ display: none; }

@media (max-width: 860px){
  .netmenu__swipe{
    display: block; margin: 0 0 8px;
    font-size: var(--fs-xs); color: var(--muted);
  }
  [hidden].netmenu__swipe{ display: none !important; }
}

@media (max-width: 560px){
  .netmenu{ padding: 18px 16px; }
  .netmenu__table{ font-size: var(--fs-sm); }
}

/* =================== ESPECIALISTA DA OPERAÇÃO ===================
   Bloco de pergunta livre sobre a análise da tela. Mora no fim do
   relatório de propósito: é onde a dúvida nasce, depois de ler tudo.
   Visualmente é conversa, não painel — sem cartão, sem sombra, sem
   nada que compita com os números que vêm acima. */
.copilot[hidden]{ display: none !important; }
.copilot{
  margin: 32px 0;
  padding: 20px 24px;
  background: transparent;
  border-left: 3px solid var(--accent);
}
.copilot__head{ margin-bottom: 14px; }
.copilot__eyebrow{
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--muted);
  display: block;
}
.copilot__lede{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--fs-md);
  max-width: 62ch;
}

/* Sugestões montadas a partir dos números DESTA casa — por isso são
   chips e não placeholder: a primeira pergunta já vem específica, e o
   dono descobre o que dá pra perguntar sem ter que adivinhar. */
.copilot__chips{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}
.copilot__chips:empty{ display: none; }
.copilot__chip{
  font: inherit;
  font-size: var(--fs-sm);
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.copilot__chip:hover{ border-color: var(--accent); background: var(--paper); }
.copilot__chip[disabled]{ opacity: 0.5; cursor: default; }

.copilot__thread{
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 14px;
}
.copilot__thread:empty{ display: none; }
.copilot__turn{ display: flex; flex-direction: column; gap: 6px; }
.copilot__q{
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.copilot__q::before{
  content: 'VOCÊ PERGUNTOU';
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 3px;
}
.copilot__a{
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink);
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  white-space: pre-wrap;
}
/* O especialista abrindo assunto — hoje só a conferência do cardápio faz isso.
   Sem a linha "VOCÊ PERGUNTOU" em cima (não houve pergunta), e com um rótulo
   que diz de onde a fala veio: sem ele, o dono lê uma resposta pendurada e não
   entende a que pergunta dele aquilo responde. */
.copilot__turn--aberto .copilot__a{
  border-left: 3px solid var(--accent);
}
.copilot__turn--aberto .copilot__a::before{
  content: 'SOBRE O CARDÁPIO QUE VOCÊ MANDOU';
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.copilot__a[data-state="loading"]{
  font-style: italic;
  color: var(--muted);
  background: transparent;
  border-style: dashed;
}
/* Falha aparece com cara de falha nossa e com saída (o botão de tentar de
   novo), nunca como silêncio — bloco que some sem explicação lê como
   "perguntei e ele me ignorou". */
.copilot__a[data-state="error"]{
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-25);
}
.copilot__retry{
  align-self: flex-start;
  font: inherit; font-size: var(--fs-sm);
  margin-top: 2px;
  padding: 0;
  background: none; border: none;
  color: var(--primary); text-decoration: underline;
  cursor: pointer;
}

.copilot__form{ display: flex; gap: 10px; align-items: stretch; }
.copilot__input{
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: var(--fs-md);
  padding: 11px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink);
}
.copilot__input::placeholder{ color: var(--muted); }
.copilot__input:focus{ outline: none; border-color: var(--accent); }
.copilot__send{
  flex: 0 0 auto;
  font: inherit; font-size: var(--fs-md); font-weight: 600;
  padding: 11px 20px;
  background: var(--primary);
  border: 1px solid var(--primary);
  border-radius: var(--r-md);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s var(--ease);
}
.copilot__send:hover{ opacity: 0.88; }
.copilot__send[disabled]{ opacity: 0.45; cursor: default; }

/* O caminho do rodapé pro fio inteiro. Peso de link, não de botão: é uma
   saída lateral, e competir com "Perguntar" tiraria gente da caixa em que
   ela já estava prestes a escrever. */
.copilot__mais{
  display: block;
  margin: 0 0 12px;
  padding: 0;
  background: none; border: none;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.copilot__mais:hover{ color: var(--accent); }
.copilot__mais[hidden]{ display: none !important; }

@media (max-width: 560px){
  .copilot{ padding: 18px 16px; }
  /* No celular o botão embaixo em largura cheia: campo e botão lado a lado
     espremem o campo a ponto de a pergunta não caber na tela. */
  .copilot__form{ flex-direction: column; }
  .copilot__send{ width: 100%; padding: 13px 20px; }
}

/* ================================================================
   A CONVERSA — a terceira frente
   ================================================================
   Mesma família visual do rodapé do especialista (as peças internas são as
   mesmas classes .copilot__*), mas aqui ela é a TELA, não o pé de uma. Por
   isso ganha título de frente, como as outras duas, e perde a faixa lateral
   do bloco: não há nada acima do que ela precise se destacar. */
/* A CONVERSA ENTRA NO DESENHO DA CASA.
   Era a única frente sem cartão, sem sobretítulo e sem o fio dourado: um h2
   solto sobre o bege, com a caixa de perguntar embaixo. As outras três abrem
   como peça editorial; esta abria como formulário. Mesma moldura do
   fechamento (.closes): papel, borda fina, fio à esquerda. */
.conversa{
  margin: 0;
  max-width: var(--col-bancada);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 22px 24px 20px;
}
.conversa__head{ margin-bottom: 20px; }
.conversa__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 10px;
}
/* Mesmo peso do título do fechamento: as duas são frentes, e frente com
   títulos de tamanhos diferentes faz o produto parecer montado por pessoas
   diferentes. */
.conversa__title{
  margin: 0 0 10px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--ink);
}
.conversa__lede{
  margin: 0;
  color: var(--muted); font-size: var(--fs-md); line-height: 1.55;
  max-width: 70ch;
}

/* Casa sem número nenhum. Convite, não erro: a pessoa não fez nada errado —
   o produto é que ainda não tem do que falar com ela. */
.conversa__vazio{
  padding: 22px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
}
.conversa__vazio[hidden]{ display: none !important; }
.conversa__vazio-txt{ margin: 0 0 16px; color: var(--muted); max-width: 58ch; }
.conversa__vazio-acoes{ display: flex; flex-wrap: wrap; gap: 10px; }

.conversa__corpo[hidden]{ display: none !important; }
/* O fio inteiro rola dentro de si, não dentro da página: com a caixa de
   escrever presa embaixo, quem tem uma conversa de semanas não precisa rolar
   a tela toda pra voltar a perguntar. */
.conversa__thread{
  max-height: min(58vh, 620px);
  overflow-y: auto;
  padding-right: 6px;
}
.conversa__pe{
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px;
  margin-top: 14px;
}
.conversa__nota{
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5;
  color: var(--muted); max-width: 62ch;
}
.conversa__limpar{
  padding: 0; background: none; border: none;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; white-space: nowrap;
}
.conversa__limpar:hover{ color: var(--danger, #B4232A); }
.conversa__limpar[hidden]{ display: none !important; }
.conversa__limpar[disabled]{ opacity: 0.5; cursor: default; }

@media (max-width: 560px){
  .conversa__title{ font-size: var(--fs-xl); }
  .conversa__vazio{ padding: 18px 16px; }
  .conversa__thread{ max-height: none; overflow: visible; padding-right: 0; }
  .conversa__pe{ flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   MESA E ENTREGA — os dois cardápios da casa
   ================================================================
   Único bloco do relatório em que o dono INFORMA preço em vez de receber.
   Por isso ele se parece com a tabela de recomendação (mesma família visual,
   o leitor não muda de língua no meio do documento) mas tem campo editável e
   uma manchete própria: o número que resolve a conta não é a comissão, é o
   quanto o outro cardápio precisa estar acima dela. */
.mesaent{ margin-top: 32px; padding: 20px 22px; background: #F8FAFB; border: 1px solid var(--slate-line); border-radius: 8px; }
.mesaent__head{ margin-bottom: 14px; }
.mesaent__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 6px;
}
.mesaent__title{ font-size: var(--fs-xl); margin: 0 0 6px 0; color: var(--primary); font-weight: 600; }
.mesaent__lede{ font-size: var(--fs-sm); color: var(--slate-dark); margin: 0; line-height: 1.5; max-width: 78ch; }

.mesaent__setup{ margin: 16px 0 4px; }
.mesaent__field{ display: block; }
.mesaent__field-label{
  display: block; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px;
}
.mesaent__field-box{ display: inline-flex; align-items: center; gap: 6px; }
.mesaent__input{
  width: 92px; padding: 8px 10px; font-family: var(--font-mono); font-size: var(--fs-lg);
  border: 1px solid var(--slate-border); border-radius: 6px; background: #FFF; color: var(--primary);
}
.mesaent__input:focus{ outline: 2px solid var(--slate-blue); outline-offset: 1px; }
.mesaent__suffix{ font-family: var(--font-mono); color: var(--slate-dark); }
.mesaent__field-note{ margin: 6px 0 0; font-size: var(--fs-xs); color: var(--slate); max-width: 70ch; }

/* A COMPOSIÇÃO DA TAXA. Fechada por padrão: quem só quer a comissão responde
   um campo e vai embora; quem quer a conta inteira abre e responde cinco. O
   custo de canal aparece no próprio resumo, pra o número não ficar escondido
   atrás de um clique depois de calculado. */
.mesaent__taxa{ margin-top: 14px; border-top: 1px solid var(--slate-line); padding-top: 10px; }
.mesaent__taxa-sum{
  cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--slate-blue);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.mesaent__taxa-sum::-webkit-details-marker{ display: none; }
.mesaent__taxa-sum::before{ content: '+'; font-size: var(--fs-md); line-height: 1; }
.mesaent__taxa[open] .mesaent__taxa-sum::before{ content: '−'; }
.mesaent__taxa-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 18px; margin: 12px 0 0;
}
.mesaent__taxa-linha{ display: block; }
.mesaent__taxa-rot{
  display: block; font-size: var(--fs-sm); color: var(--slate-dark); margin-bottom: 4px;
}
.mesaent__taxa-box{ display: inline-flex; align-items: center; gap: 5px; }
.mesaent__taxa-input{
  width: 78px; padding: 6px 8px; font-family: var(--font-mono); font-size: var(--fs-md);
  border: 1px solid var(--slate-border); border-radius: 5px; background: #FFF; color: var(--primary);
}
.mesaent__taxa-input:focus{ outline: 2px solid var(--slate-blue); outline-offset: 1px; }
.mesaent__taxa-un{ font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--slate); }
.mesaent__taxa-ref{
  display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--slate-light);
}
/* Quanto a linha em reais pesa no pedido. Fica ao lado da referência porque é
   a mesma pergunta: esse número é grande ou pequeno? */
.mesaent__taxa-peso{ display: block; color: var(--danger); font-weight: 600; }
.mesaent__taxa-total{
  margin: 12px 0 0; font-size: var(--fs-sm); color: var(--primary); line-height: 1.5; max-width: 74ch;
}

/* A POLÍTICA DE PREÇO. Dois botões e uma nota — a nota é o bloco de verdade,
   porque é ela que diz o que cada escolha custa. */
.mesaent__politica{ margin: 16px 0 4px; }
.mesaent__politica-opts{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.mesaent__politica-opt{
  flex: 1 1 220px; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--slate-border); border-radius: 6px;
  background: #FFF; color: var(--slate-dark); font: inherit;
}
.mesaent__politica-opt b{ display: block; font-size: var(--fs-md); color: var(--primary); font-weight: 600; }
.mesaent__politica-opt span{ display: block; font-size: var(--fs-xs); margin-top: 2px; }
.mesaent__politica-opt:hover{ border-color: var(--slate-blue); }
.mesaent__politica-opt.is-on{ border-color: var(--slate-blue); border-width: 2px; background: #F2F6FB; }
.mesaent__politica-nota{
  margin: 10px 0 0; font-size: var(--fs-sm); color: var(--slate-dark); line-height: 1.55; max-width: 78ch;
}

/* O LIMITE DE CANIBALIZAÇÃO. Sai no impresso de propósito: é a premissa da
   política inteira, e o dono leva o relatório pra discutir com o sócio. */
.mesaent__canib{
  margin-top: 16px; padding: 14px 16px;
  background: #FFF; border: 1px solid var(--slate-line); border-left: 3px solid var(--danger);
  border-radius: 6px; max-width: 82ch;
}
.mesaent__canib-eyebrow{
  display: block; font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--danger); margin-bottom: 8px;
}
.mesaent__canib p{ margin: 0 0 8px; font-size: var(--fs-sm); color: var(--primary); line-height: 1.55; }
.mesaent__canib p:last-child{ margin-bottom: 0; }
.mesaent__canib-nota, .mesaent__canib-teste{ font-size: var(--fs-sm) !important; color: var(--slate) !important; }

/* A manchete. É a frase que o dono leva embora mesmo se não preencher mais
   nada — então ela tem peso de texto, não de nota de rodapé. */
.mesaent__headline{
  margin: 16px 0 4px; padding: 12px 14px;
  background: #FFF; border: 1px solid var(--slate-line); border-left: 3px solid var(--slate-blue);
  border-radius: 6px; font-size: var(--fs-md); line-height: 1.5; color: var(--primary); max-width: 78ch;
}
.mesaent__headline b{ font-weight: 600; }

.mesaent__wrap{ overflow-x: auto; }
.mesaent__grid{ width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin-top: 12px; }
.mesaent__grid th{
  text-align: left; padding: 8px 10px;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--slate); border-bottom: 1px solid var(--slate-border);
}
.mesaent__grid td{ padding: 9px 10px; border-bottom: 1px solid var(--slate-line); vertical-align: middle; }
.mesaent__grid tr:last-child td{ border-bottom: none; }
.mesaent__col-item{ color: var(--primary); font-weight: 500; }
.mesaent__col-num{ font-family: var(--font-mono); white-space: nowrap; }
.mesaent__eq{ font-weight: 600; color: var(--primary); }
.mesaent__col-res{ white-space: nowrap; font-size: var(--fs-sm); }
.mesaent__price{
  width: 88px; padding: 6px 8px; font-family: var(--font-mono); font-size: var(--fs-sm);
  border: 1px solid var(--slate-border); border-radius: 5px; background: #FFF; color: var(--primary);
}
.mesaent__price:focus{ outline: 2px solid var(--slate-blue); outline-offset: 1px; }
/* Linha em que o preço informado não cobre a comissão. Marca discreta na
   borda: o veredito está escrito na coluna do lado, e pintar a linha inteira
   de vermelho num cardápio com trinta pratos vira ruído, não alerta. */
.mesaent__grid tr.is-curto td{ background: #FDF6F5; }
.mesaent__bad{ color: var(--danger); font-weight: 600; }
.mesaent__ok{ color: #2F7A4F; font-weight: 600; }
.mesaent__muted{ color: var(--slate-light); font-style: italic; }
.mesaent__foot{ margin: 14px 0 0; font-size: var(--fs-sm); color: var(--slate); line-height: 1.5; max-width: 78ch; }

/* No celular a tabela EMPILHA. Rolagem horizontal aqui seria o pior desenho
   possível: as duas colunas que carregam a decisão — o preço que ele cobra e o
   que sobra no bolso — são as últimas, ou seja, exatamente as que ficariam
   fora da tela de quem não descobre que dá pra arrastar. */
@media (max-width: 640px){
  .mesaent{ padding: 14px; }
  .mesaent__headline{ font-size: var(--fs-sm); padding: 10px 12px; }
  .mesaent__wrap{ overflow-x: visible; }
  .mesaent__grid, .mesaent__grid tbody, .mesaent__grid tr, .mesaent__grid td{ display: block; width: 100%; }
  .mesaent__grid thead{ display: none; }
  .mesaent__grid tr{
    border: 1px solid var(--slate-line); border-radius: 6px; background: #FFF;
    padding: 4px 12px 8px; margin-bottom: 10px;
  }
  .mesaent__grid tr.is-curto{ border-color: #E8C4BE; background: #FDF6F5; }
  .mesaent__grid tr.is-curto td{ background: transparent; }
  .mesaent__grid td{
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid #EEF2F5; font-size: var(--fs-sm);
  }
  .mesaent__grid tr td:last-child{ border-bottom: none; }
  .mesaent__grid td::before{
    content: attr(data-label);
    font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.07em;
    text-transform: uppercase; color: var(--slate); flex: 0 0 auto;
  }
  /* O nome do prato é o título do cartão, não mais um par rótulo/valor. */
  .mesaent__grid td.mesaent__col-item{
    display: block; font-size: var(--fs-md); font-weight: 600; color: var(--primary);
    padding-top: 10px; padding-bottom: 8px;
  }
  .mesaent__grid td.mesaent__col-item::before{ display: none; }
  .mesaent__price{ width: 96px; text-align: right; }
  /* No celular a composição vira uma coluna só: dois campos lado a lado com
     rótulo de duas linhas ficam ilegíveis, e este é o bloco em que errar de
     campo troca o custo do canal inteiro. */
  .mesaent__taxa-grid{ grid-template-columns: 1fr; gap: 12px; }
  .mesaent__taxa-linha{
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
  }
  .mesaent__taxa-rot{ flex: 1 1 auto; margin-bottom: 0; }
  .mesaent__taxa-ref{ flex: 1 1 100%; margin-top: 2px; }
  .mesaent__politica-opt{ flex: 1 1 100%; }
  .mesaent__canib{ padding: 12px 14px; }
}

/* ================= A SEMANA =================
   O fechamento semanal — o produto entrando na reunião de segunda que a rede
   já faz. Vive dentro da frente "pra onde a casa está indo", acima do mês,
   porque é o que acontece toda semana. Reaproveita os campos e a tabela do
   fechamento mensal (.closes__*): é o mesmo gesto em outro ritmo, e inventar
   uma segunda linguagem visual pro mesmo ato faria a tela parecer dois
   produtos. O que é próprio daqui são os cartões da leitura. */
/* Vem ANTES do mês na tela e por isso fecha embaixo, não em cima: é a semana
   que abre o assunto, e o mês que continua a partir dela. */
.semana{
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
  margin-bottom: 26px;
}
.semana__head{ margin-bottom: 16px; }
.semana__eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 8px;
}
.semana__title{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.15;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 6px;
}
.semana__lede{
  font-size: var(--fs-md); line-height: 1.5; color: var(--primary-60); margin: 0;
  max-width: 62ch;
}

/* Os cartões da leitura. auto-fit porque o número de cartões varia com o que
   o dono informou — sem CMV e sem pessoas sobra só o faturamento, e ele não
   pode ficar esticado na largura inteira. */
.semana__leitura{ margin-bottom: 20px; }
.semana__cards{
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.semana__card{
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; background: var(--surface-raised, transparent);
  display: flex; flex-direction: column; gap: 3px;
}
.semana__card-label{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--primary-60); line-height: 1.3;
}
.semana__card-value{
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500;
  color: var(--ink); line-height: 1.1;
}
.semana__card-delta{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--primary-60);
}
/* O tom é sobre o lado BOM, não sobre o sinal: no CMV quem cai é que é boa
   notícia, e o render já inverte antes de carimbar o atributo. */
.semana__card-delta[data-tom="up"]{ color: var(--positive); }
.semana__card-delta[data-tom="down"]{ color: var(--danger); }
.semana__base{
  margin: 10px 0 0; font-size: var(--fs-xs); line-height: 1.45;
  color: var(--primary-60);
}

.semana__form{ border-top: none; padding-top: 0; }
.semana__table{ margin-top: 0; }
/* Rola DENTRO de si, como a tabela dos meses. Sem isto, as seis colunas da
   semana empurram a página inteira no celular: a tela do dono passava a rolar
   pro lado, e o cabeçalho e os cartões saíam de esquadro junto. */
.semana__table-wrap{ margin-top: 16px; overflow-x: auto; }

/* A prestação de contas das decisões de preço. */
.semana__contas{
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
}
.semana__contas-eyebrow{
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 12px;
}
.semana__contas-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.semana__conta{
  display: flex; flex-direction: column; gap: 2px;
  padding-left: 12px; border-left: 2px solid var(--border);
}
.semana__conta-item{ font-weight: 600; color: var(--ink); font-size: var(--fs-md); }
.semana__conta-mov{
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--primary-60);
}
.semana__conta-veredito{
  font-size: var(--fs-sm); line-height: 1.45; color: var(--primary-60); margin-top: 2px;
}

@media (max-width: 640px){
  .semana__cards{ grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .semana__card-value{ font-size: var(--fs-lg); }
}

/* ================= OS GRÁFICOS =================
   Desenho fino, tinta só onde é dado. A figura tem três partes fixas: título
   curto, o desenho, e a FRASE DE CONCLUSÃO — a tarja que o relatório do cliente
   do piloto põe embaixo de todo gráfico e que é o que separa visual de poluído.
   Sem a frase, o gráfico não entra. */
.semana__graficos{
  display: grid; gap: 20px; margin: 22px 0 4px;
  /* Dois por linha no desktop, um por linha no celular — 400px é a largura em
     que o dono lê isso, e gráfico espremido em meia tela não se lê. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grafico{ margin: 0; }
.grafico__titulo{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--primary-60); margin-bottom: 8px;
}
/* preserveAspectRatio="none" no SVG: a caixa manda na altura, o desenho estica
   na largura. Por isso a altura vive aqui, e não no viewBox. */
.grafico__svg{ display: block; width: 100%; height: 132px; overflow: visible; }
/* A tarja da conclusão. Fundo discreto como no relatório deles — é legenda de
   leitura, não um aviso, então não usa cor de status. */
.grafico__nota{
  margin: 10px 0 0; padding: 7px 10px;
  background: var(--primary-04); border-radius: 6px;
  font-size: var(--fs-sm); line-height: 1.45; color: var(--ink);
}
@media (max-width: 640px){
  .semana__graficos{ grid-template-columns: 1fr; gap: 18px; }
  .grafico__svg{ height: 122px; }
  .grafico__nota{ font-size: var(--fs-xs); }
}

/* ================= A RÉGUA DO PRATO =================
   Onde o preço do dono cai na faixa da região. Não tem eixo: a barra É a faixa,
   então não há escala a ler — só posição. Aparece na linha que tem movimento a
   fazer; em toda linha viraria parede de listras. */
/* Largura explícita: a célula do prato é flex com align-items:flex-start, então
   o filho encolhe pro tamanho do conteúdo. Enquanto a legenda existia isso
   passava despercebido — no celular, sem legenda, o trilho ficava com zero de
   largura e sobrava um pino solto sem régua nenhuma. */
.regua{ display: block; width: 100%; margin: 8px 0 6px; }
.regua__trilho{
  position: relative; display: block; height: 10px;
  /* 8% some no papel creme — medido no celular, onde o trilho virava um ponto
     solto sem trilho nenhum. O trilho é a moldura da leitura: sem ele o pino
     não está em lugar nenhum. */
  background: rgba(26,43,60,0.13); border-radius: 5px;
}
/* A faixa da região: do p25 ao p75. Mesma tinta das colunas, lavada — é
   contexto, não o dado que se aponta. */
.regua__faixa{
  position: absolute; top: 0; height: 10px; border-radius: 5px;
  background: rgba(26,43,60,0.34);
}
/* A mediana: um traço, não uma cor nova. */
.regua__mediana{
  position: absolute; top: -2px; width: 2px; height: 14px;
  background: var(--primary-60); transform: translateX(-1px);
}
/* O alvo sugerido, no acento escurecido — o mesmo tom das linhas de referência
   dos gráficos, porque cumpre o mesmo papel: é a marca do "onde dá pra chegar". */
.regua__alvo{
  position: absolute; top: -3px; width: 3px; height: 16px;
  background: #A8842F; border-radius: 2px; transform: translateX(-1.5px);
}
/* O pino do dono: círculo com anel de papel, pra continuar legível quando cai
   em cima da mediana ou do alvo. */
.regua__voce{
  position: absolute; top: -3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--paper);
  transform: translateX(-8px);
  box-shadow: 0 1px 2px rgba(11,16,20,0.18);
}
.regua__legenda{
  display: block; margin-top: 7px;
  font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.5;
  color: var(--primary-60);
}
.regua__legenda b{ color: var(--ink); font-weight: 500; }
/* No celular a legenda SAI. A coluna do prato tem 158px ali, e a legenda
   quebrava em três linhas invadindo as colunas de preço ao lado. E ela era
   redundante: os três números que ela repete já estão na tela — o preço do dono
   e a mediana nas colunas vizinhas, o sugerido na pílula logo acima. Fica o
   trilho, que é o que o texto não sabe dizer: a posição. Quem não enxerga o
   desenho continua com a descrição inteira no aria-label. */
@media (max-width: 640px){
  .regua{ margin: 6px 0 2px; }
  .regua__legenda{ display: none; }
}
@media print{ .regua__voce{ box-shadow: none; } }

/* ================================================================
   TESTAR UM PREÇO — o bloco no pé da linha aberta (16/09, tópico 2ad7dfb3)

   Ocupa a largura inteira da linha, embaixo das colunas: é a resposta a um
   número que o dono digitou, não mais uma coluna. Três leituras em linhas
   separadas, cada uma com o rótulo em caixa alta à esquerda — é a separação
   que o cliente pediu ("leitura confortável e não confusa"): o olho acha
   Região, Margem e Giro antes de ler qualquer frase. Paleta do Match: papel
   branco, tinta preta, ardósia no apoio; cor só no veredito (verde para
   "cabe", ardósia para "com atenção", vermelho para "arriscado") e no que
   se clica. O bordô fica no pino do teste na régua, que é a marca do "você
   testando" — o mesmo papel que ele já faz no menu aberto.
   ================================================================ */
.testar{
  grid-column: 1 / -1; display: block; margin: 0 16px 14px; padding: 12px 14px 14px;
  border: 1px solid var(--slate-border); border-radius: 8px; background: var(--paper);
  cursor: default;
}
.row:not(.is-aberta) .testar{ display: none !important; }
.testar__form{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.testar__rotulo{
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--slate);
}
.testar__campo{ display: inline-flex; align-items: center; gap: 6px; }
.testar__cifrao{ font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--slate); }
.testar__input{
  width: 92px; font-family: var(--font-mono); font-size: var(--fs-base); padding: 6px 8px;
  border: 1px solid var(--slate-border); border-radius: 6px; color: var(--ink); background: #FFF;
  font-variant-numeric: tabular-nums;
}
.testar__input:focus{ outline: none; border-color: var(--ink); }
.testar__input--err{ border-color: var(--danger); background: var(--danger-bg); }
.testar__ir{
  font-family: inherit; font-size: var(--fs-xs); padding: 6px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: #FFF;
}
.testar__ir:hover{ background: var(--ink-dramatic); }
.testar__dica{ font-size: var(--fs-xs); color: var(--slate-light); }
.testar__resp{ margin-top: 12px; display: grid; gap: 8px; }
.testar__linha{ display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 10px; align-items: baseline; }
.testar__tag{
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--slate); padding-top: 2px;
}
.testar__txt{ font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); }
.testar__txt b{ font-weight: 600; }
.testar__mais{ color: var(--positive-deep); }
.testar__menos{ color: var(--danger); }
.testar__vered{
  margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--slate-border);
  font-size: var(--fs-sm); line-height: 1.5; color: var(--ink);
}
.testar__vered b{ font-weight: 600; }
.testar__vered[data-tom="ok"] b{ color: var(--positive-deep); }
.testar__vered[data-tom="atencao"] b{ color: var(--gold-ink); }
.testar__vered[data-tom="risco"] b{ color: var(--danger); }
.testar__acoes{ display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
/* A pílula "testando R$ 109" na linha fechada, e o pino na régua. */
.pill--teste{
  display: inline-block; margin-left: 6px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 0 6px; vertical-align: middle;
}
.regua__teste{
  position: absolute; top: -5px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--accent); transform: translateX(-10px);
  box-shadow: 0 1px 2px rgba(11,16,20,0.18);
}
@media (max-width: 720px){
  .testar{ margin: 0 10px 12px; padding: 10px 10px 12px; }
  .testar__form{ gap: 8px; }
  .testar__dica{ flex-basis: 100%; }
  .testar__linha{ grid-template-columns: 3.6rem minmax(0, 1fr); gap: 8px; }
}
@media print{ .testar{ display: none !important; } }

/* ================================================================
   O ANEXO NA CONVERSA (16/09, tópico 2ad7dfb3) — o clipe ao lado da caixa,
   o chip do arquivo escolhido em cima dela, e a ponte "levar para o
   comparativo" no pé da resposta. Mesma paleta: sem cor nova, o clipe é
   ardósia e acende em preto quando há arquivo.
   ================================================================ */
.copilot__clip{
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--paper); color: var(--slate); cursor: pointer;
}
.copilot__clip:hover{ color: var(--ink); border-color: var(--border-strong); }
.copilot__clip.is-com-anexo{ color: var(--ink); border-color: var(--ink); }
.conversa__anexo[hidden]{ display: none; }
.conversa__anexo{
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px;
  padding: 6px 8px 6px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper);
  font-size: var(--fs-xs); color: var(--slate); max-width: 100%;
}
.conversa__anexo-img{ width: 56px; height: 38px; object-fit: cover; border-radius: 4px; background: #EEE; }
.conversa__anexo-nome{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.conversa__anexo-tirar{
  border: none; background: none; cursor: pointer; font: inherit; font-size: 16px; line-height: 1;
  color: var(--slate-light); padding: 2px 6px;
}
.conversa__anexo-tirar:hover{ color: var(--danger); }
.copilot__levar{ margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.copilot__levar-nota{ font-size: var(--fs-xs); color: var(--slate); line-height: 1.45; }
/* No celular a caixa empilha (caixa em cima, botão embaixo); o clipe fica na
   MESMA linha da caixa, à esquerda, com a altura dela — um botão de 44px
   sozinho numa linha parecia um campo perdido. */
@media (max-width: 640px){
  .copilot__form{ flex-wrap: wrap; flex-direction: row; }
  .copilot__form .copilot__clip{ order: 0; width: 46px; }
  .copilot__form .copilot__input{ order: 1; flex: 1 1 0; min-width: 0; }
  .copilot__form .copilot__send{ order: 2; flex-basis: 100%; }
}
/* Os ícones das peças novas: linha fina, herdam a cor do texto ao lado. */
.testar__ico{
  display: inline-block; width: 14px; height: 14px; flex: none; vertical-align: -2px; margin-right: 5px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.testar__rotulo .testar__ico{ width: 15px; height: 15px; vertical-align: -3px; }
.testar__tag{ display: inline-flex; align-items: center; }
.testar__vered{ display: flex; align-items: flex-start; gap: 8px; }
.testar__vered .testar__ico{ width: 18px; height: 18px; margin: 2px 0 0; }
.testar__vered[data-tom="ok"] .testar__ico{ color: var(--positive-deep); }
.testar__vered[data-tom="atencao"] .testar__ico{ color: var(--gold-ink); }
.testar__vered[data-tom="risco"] .testar__ico{ color: var(--danger); }
.reco-do__btn--ico{ display: inline-flex; align-items: center; gap: 6px; }
.reco-do__btn--ico .testar__ico{ margin: 0; }
.conversa__anexo-ico{
  width: 28px; height: 28px; flex: none; fill: none; stroke: var(--slate); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.conversa__anexo-ico[hidden]{ display: none; }