/* publico.css — o site PÚBLICO (prova e torras) no Papel de Oficina.
   CONTRATO §5 e §9.11. As páginas logadas continuam em estilo.css.

   Regras da casa, as mesmas do app Roast Studio 2.0:
   · um tema só, o claro; nada de seletor de tema;
   · canto reto, moldura de 3 px em tinta, sombra dura de 6 px só no cartão;
   · vermelho é a PRÓXIMA ação (uma por tela) e os marcos do gráfico;
   · número é mono negrito; nada abaixo de 13 px; zero animação;
   · o chão é concreto e nele só tinta é texto (tinta-2 só em painel/campo).

   A escala do app é em pontos (12/14/16/18/22/28/40/56 pt, lida a 2 m do
   torrador). No celular, lido de perto, ela vira 13/16/18/20/24/32/44 px. */

:root {
  color-scheme: light;

  --concreto: #cdc9c1;
  --painel: #dbd8d1;
  --campo: #f3efe8;
  --tinta: #161511;
  --tinta-2: #5b574e;
  --meio: #b0aca3;
  --vermelho: #c4321f;
  --verde: #256b38;
  --azul: #1d5f9e;
  --laranja: #a05413;
  --serie-3: #1d5f9e;
  --serie-4: #256b38;
  --serie-5: #7043a0;
  --serie-6: #99510f;

  /* nomes que o vocabulário de provas.py e o provas.js já usam */
  --creme: var(--campo);
  --mid: var(--meio);
  --tinta-fraca: var(--tinta-2);
  --apagado: var(--tinta-2);

  --sans: "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  --t-minimo: 13px;
  --t-texto: 16px;
  --t-nav: 18px;
  --t-acao: 20px;
  --t-titulo: 24px;
  --t-numero: 32px;
  --t-resultado: 44px;

  --borda: 3px;
  --sombra: 6px 6px 0 var(--tinta);
  --gutter: 16px;
  --barra-acao: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--concreto);
  color: var(--tinta);
  font: 400 var(--t-texto)/1.45 var(--sans);
  overflow-x: hidden;
}

a { color: inherit; }
img, svg { max-width: 100%; }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: var(--borda) solid var(--vermelho); outline-offset: 2px; }

.oculto { display: none !important; }

/* ── Cabeçalho: marca + duas áreas ─────────────────────────────────────────── */
.topo {
  display: flex;
  align-items: stretch;
  min-height: 56px;
  background: var(--painel);
  border-bottom: var(--borda) solid var(--tinta);
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--gutter);
  text-decoration: none;
  font: 700 var(--t-texto)/1 var(--sans);
  letter-spacing: .04em;
  white-space: nowrap;
  min-width: 0;
}
.marca img { height: 28px; width: auto; display: block; }

.areas { display: flex; margin-left: auto; }
.area {
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-left: var(--borda) solid var(--tinta);
  font: 700 var(--t-nav)/1 var(--sans);
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--tinta);
}
.area.ativa { background: var(--tinta); color: var(--campo); }

.loja {
  display: none;
  align-items: center;
  padding: 0 var(--gutter);
  border-left: var(--borda) solid var(--tinta);
  font: 700 var(--t-minimo)/1 var(--sans);
  letter-spacing: .08em;
  text-decoration: none;
}

/* ── Página ────────────────────────────────────────────────────────────────── */
.pagina {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px var(--gutter) 40px;
}
/* a página que tem barra de ação fixa no celular reserva o espaço dela */
.pagina.com-barra { padding-bottom: calc(var(--barra-acao) + 48px); }

.rodape {
  border-top: var(--borda) solid var(--tinta);
  padding: 18px var(--gutter);
  font-size: 14px;
  text-align: center;
}

/* ── Tipografia de área ────────────────────────────────────────────────────── */
.rotulo {
  display: block;
  font: 700 var(--t-minimo)/1.2 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.titulo-pagina {
  font: 700 clamp(34px, 9.5vw, 48px)/1.05 var(--sans);
  letter-spacing: -.01em;
}

.linha-lote {
  margin-top: 10px;
  font: 700 14px/1.4 var(--mono);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.secao { margin-top: 36px; }
.secao > h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: var(--borda) solid var(--tinta);
  font: 700 var(--t-titulo)/1.15 var(--sans);
}
.secao > h2 small { font: 700 var(--t-minimo)/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }

.nota { font-size: 15px; line-height: 1.5; }
.nota a { font-weight: 700; }

/* Link de texto no meio da frase: a área de toque cresce para 44 px sem
   mexer no desenho (padding para fora, margem negativa para dentro). */
.nota a, .regua a, .rodape a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}
.subtitulo { margin-top: 10px; }
.cartao .nota { margin-top: 12px; }

/* ── Selo ──────────────────────────────────────────────────────────────────── */
.selo {
  display: inline-block;
  padding: 4px 10px;
  border: var(--borda) solid var(--tinta);
  background: var(--campo);
  font: 700 var(--t-minimo)/1.2 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}
.selo.tinta { background: var(--tinta); color: var(--campo); }
.selo.ok { background: var(--verde); color: var(--campo); border-color: var(--verde); }

/* ── Botões ────────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 20px;
  border: var(--borda) solid var(--tinta);
  background: var(--painel);
  color: var(--tinta);
  font: 700 var(--t-texto)/1.1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border-radius: 0;
}
/* a PRÓXIMA ação: uma por tela */
.botao.principal {
  width: 100%;
  min-height: var(--barra-acao);
  background: var(--vermelho);
  color: var(--campo);
  font-size: var(--t-acao);
}
.botao.principal[disabled],
.botao.principal[data-vazio] {
  background: var(--concreto);
  color: var(--tinta-2);
  border-color: var(--meio);
  cursor: default;
}
.botao.discreto { background: transparent; border-color: transparent; text-decoration: underline; padding-left: 4px; padding-right: 4px; }

/* No celular a próxima ação mora no pé da tela, ao alcance do polegar. */
.barra-acao {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--painel);
  border-top: var(--borda) solid var(--tinta);
}
.barra-acao .botao.principal { max-width: 728px; margin: 0 auto; display: flex; }

/* ── Números ───────────────────────────────────────────────────────────────── */
.numeros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: var(--borda) solid var(--tinta);
  background: var(--campo);
}
.numero {
  padding: 12px 14px 14px;
  border-right: var(--borda) solid var(--tinta);
  border-bottom: var(--borda) solid var(--tinta);
  min-width: 0;
}
.numero:nth-child(2n) { border-right: 0; }
.numero:nth-last-child(-n+2):nth-child(odd),
.numero:nth-last-child(-n+2):nth-child(odd) ~ .numero { border-bottom: 0; }
/* "DESENVOL-VIMENTO": a quebra só acontece no hífen opcional do template,
   e o espaçamento menor que o dos outros rótulos faz ele caber numa linha
   nos celulares comuns (360 a 430 px) */
.numero .rotulo { color: var(--tinta-2); letter-spacing: .04em; }
.numero b {
  display: block;
  margin-top: 4px;
  font: 700 var(--t-numero)/1 var(--mono);
  letter-spacing: -.02em;
  white-space: nowrap;
}
.numero b small { font-size: 18px; letter-spacing: 0; margin-left: 2px; }
.numero b.faixa { font-size: 24px; }

.numeros-miudos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font: 700 14px/1.4 var(--mono);
  text-transform: uppercase;
}
.numeros-miudos span { white-space: nowrap; }

/* ── Gráfico (SVG do servidor, grafico_svg.py) ─────────────────────────────── */
.moldura-grafico {
  margin-top: 16px;
  border: var(--borda) solid var(--tinta);
  background: var(--campo);
  padding: 6px 4px 2px;
}
.grafico { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; }
.grafico .g-fundo { fill: var(--campo); }
.grafico .g-grade { stroke: var(--meio); stroke-width: 1; }
.grafico .g-eixo { fill: var(--tinta-2); font: 700 11px var(--mono); }
.grafico .g-eixo-ror { fill: var(--azul); }
.grafico .g-bt { fill: none; stroke: var(--tinta); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.grafico .g-ror { fill: none; stroke: var(--azul); stroke-width: 2; stroke-linejoin: round; }
.grafico .g-serie { fill: none; stroke-width: 1.6; stroke-linejoin: round; }
.grafico .g-serie-3 { stroke: var(--serie-3); }
.grafico .g-serie-4 { stroke: var(--serie-4); }
.grafico .g-serie-5 { stroke: var(--serie-5); }
.grafico .g-serie-6 { stroke: var(--serie-6); }
.grafico .g-marco { stroke: var(--vermelho); stroke-width: 1.5; stroke-dasharray: 4 3; }
.grafico .g-marco-txt { fill: var(--vermelho); font: 700 11px var(--sans); letter-spacing: .04em; }

.leitura {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 10px;
  font-size: 15px;
}
.leitura span { display: inline-flex; align-items: center; gap: 8px; }
.traco { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--tinta); }
.traco.azul { border-top-color: var(--azul); border-top-width: 2px; }
.traco.g-serie-3 { border-top-color: var(--serie-3); border-top-width: 2px; }
.traco.g-serie-4 { border-top-color: var(--serie-4); border-top-width: 2px; }
.traco.g-serie-5 { border-top-color: var(--serie-5); border-top-width: 2px; }
.traco.g-serie-6 { border-top-color: var(--serie-6); border-top-width: 2px; }
.leitura .mono { font: 700 14px var(--mono); }
.moldura-grafico + .nota { margin-top: 10px; }

/* Barra de fases: largura de cada célula = tempo da fase; claro → escuro,
   como o café. Os nomes ficam na legenda embaixo, em colunas iguais. */
.fases {
  display: flex;
  height: 22px;
  margin-top: 14px;
  border: var(--borda) solid var(--tinta);
  background: var(--campo);
}
.fase { min-width: 6px; border-left: var(--borda) solid var(--tinta); }
.fase:first-child { border-left: 0; }
.secagem { background: var(--campo); }
.maillard { background: var(--meio); }
.desenvolvimento { background: var(--tinta); }

/* celular: uma fase por linha, nome à esquerda e número à direita */
.fases-leg { margin-top: 8px; }
.fases-leg div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0; }
.fases-leg dt { display: flex; align-items: center; gap: 8px; font: 700 var(--t-minimo)/1.2 var(--sans); letter-spacing: .08em; }
.fases-leg dd { font: 700 16px/1.2 var(--mono); white-space: nowrap; }
.amostra { flex: 0 0 12px; width: 12px; height: 12px; border: 2px solid var(--tinta); }

/* ── Mapa vivo (lambe) ─────────────────────────────────────────────────────── */
.cartao {
  background: var(--painel);
  border: var(--borda) solid var(--tinta);
  box-shadow: var(--sombra);
  padding: 18px;
  margin-right: 6px;
  margin-bottom: 6px;
}
.cartao + .cartao { margin-top: 18px; }
.cartao h2, .cartao h3 { font: 700 var(--t-titulo)/1.15 var(--sans); }
.cartao .cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.lambe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: 14px 0 6px;
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.lambe b {
  font-weight: 900;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 18px;
}
.lambe .tag-voce {
  font-style: normal;
  font-size: .5em;
  letter-spacing: .1em;
  margin-left: .25em;
  vertical-align: .4em;
}

.formacao {
  margin: 14px 0 6px;
  padding: 14px;
  border: var(--borda) dashed var(--tinta);
  background: var(--campo);
  font-size: 16px;
}
.formacao b { display: block; font: 700 var(--t-nav)/1.2 var(--sans); }

.regua {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px solid var(--tinta);
  font-size: 15px;
}
.regua a { font-weight: 700; }

.cartao .pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

/* ── Ficha de origem ───────────────────────────────────────────────────────── */
.ficha { border: var(--borda) solid var(--tinta); background: var(--campo); }
.ficha div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  align-items: center;
  padding: 8px 14px;
  border-top: 2px solid var(--tinta);
}
.ficha div:first-child { border-top: 0; }
.ficha dt { font: 700 var(--t-minimo)/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); }
.ficha dd { font-weight: 700; text-align: right; }

/* ── Lista de escolha (cafés) ──────────────────────────────────────────────── */
.lista {
  margin-top: 22px;
  border: var(--borda) solid var(--tinta);
  background: var(--campo);
}
.lista > li + li { border-top: 2px solid var(--tinta); }
.linha {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 14px;
  min-height: 72px;
  padding: 14px 16px;
  text-decoration: none;
}
.linha:focus-visible { background: var(--painel); }
/* só em quem tem mouse: no celular o hover "gruda" depois do toque */
@media (hover: hover) { .linha:hover { background: var(--painel); } }
.linha .nome { font: 700 22px/1.15 var(--sans); }
.linha .origem { grid-column: 1; font-size: 15px; color: var(--tinta-2); }
.linha .notas { grid-column: 1; font: 700 var(--t-minimo)/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.linha .lado { grid-column: 2; grid-row: 1 / span 3; text-align: right; }
.linha .data { display: block; font: 700 14px/1.3 var(--mono); }
.linha .seta { display: block; font: 700 24px/1 var(--sans); margin-top: 4px; }
.linha.encerrado .nome, .linha.encerrado .origem { color: var(--tinta-2); }

/* ── Prova: famílias e notas ───────────────────────────────────────────────── */
.passo-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding-bottom: 8px;
  border-bottom: var(--borda) solid var(--tinta);
}
.passo-topo h2 { font: 700 var(--t-titulo)/1.15 var(--sans); }
.contador { font: 700 var(--t-titulo)/1 var(--mono); }

.erro {
  margin-top: 16px;
  padding: 12px 14px;
  border: var(--borda) solid var(--vermelho);
  background: var(--campo);
  color: var(--vermelho);
  font-weight: 700;
}

.familias { margin-top: 14px; border: var(--borda) solid var(--tinta); background: var(--campo); }
.familia + .familia { border-top: 2px solid var(--tinta); }
.familia summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px 10px 0;
  cursor: pointer;
  list-style: none;
  font: 700 var(--t-nav)/1.2 var(--sans);
}
.familia summary::-webkit-details-marker { display: none; }
.familia summary::before {
  content: "";
  align-self: stretch;
  width: 10px;
  flex: 0 0 10px;
  background: var(--cor-familia, var(--tinta));
}
.familia summary::after { content: "+"; margin-left: auto; font: 700 24px/1 var(--mono); }
.familia[open] summary::after { content: "−"; }
.familia[open] summary { border-bottom: 2px solid var(--meio); }
.familia .marcadas-familia { font: 700 var(--t-minimo)/1 var(--mono); padding: 4px 8px; background: var(--tinta); color: var(--campo); }
.familia .marcadas-familia:empty { display: none; }

.notas-familia { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; }
.nota-chip { position: relative; }
.nota-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nota-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 16px;
  border: var(--borda) solid var(--tinta);
  background: var(--painel);
  font: 700 var(--t-texto)/1.1 var(--sans);
  cursor: pointer;
}
.nota-chip input:checked + span { background: var(--tinta); color: var(--campo); }
.nota-chip input:checked + span::before { content: "✓ "; white-space: pre; }
.nota-chip input:focus-visible + span { outline: var(--borda) solid var(--vermelho); outline-offset: 2px; }
.nota-chip input:disabled + span { background: var(--concreto); color: var(--tinta-2); border-color: var(--meio); cursor: default; }

.campo-livre { margin-top: 24px; }
.campo-livre label { display: block; margin-bottom: 8px; }
.campo-livre input {
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: var(--borda) solid var(--tinta);
  border-radius: 0;
  background: var(--campo);
  color: var(--tinta);
  font: 400 var(--t-texto)/1.3 var(--sans);
}
.campo-livre input:focus { outline: 0; border-color: var(--vermelho); }

/* honeypot: fora da tela, não `display:none` (robô ingênuo pula campo oculto) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* a bandeja da prova: as notas marcadas em cima do botão */
.bandeja {
  max-width: 728px;
  margin: 0 auto 8px;
  min-height: 22px;
  font: 700 15px/1.3 var(--sans);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bandeja:empty::before { content: "nenhuma nota marcada"; color: var(--tinta-2); text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ── Recompensa ────────────────────────────────────────────────────────────── */
.registrada {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--verde);
  color: var(--campo);
  border: var(--borda) solid var(--tinta);
  font: 700 var(--t-nav)/1.2 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.acoes-pe { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.acoes-pe .botao { width: 100%; }

/* ── Método (#metodo no /mapa) ─────────────────────────────────────────────── */
.prosa p { max-width: 65ch; font-size: 16px; line-height: 1.6; }
.prosa p + p { margin-top: 12px; }

/* ── Desktop ───────────────────────────────────────────────────────────────── */
@media (min-width: 760px) {
  .loja { display: flex; }
  .pagina { padding-top: 36px; }
  .pagina.com-barra { padding-bottom: 48px; }
  /* no desktop a próxima ação fica no fluxo, logo abaixo do cabeçalho */
  .barra-acao { position: static; padding: 0; margin-top: 22px; background: none; border: 0; }
  .barra-acao .botao.principal { max-width: 420px; margin: 0; }
  /* uma linha só no desktop, quantos números houver (4 na torra, 2 na
     consistência), sem célula vazia sobrando */
  .numeros { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .numero { border-bottom: 0; }
  .numero:nth-child(2n) { border-right: var(--borda) solid var(--tinta); }
  .numero:last-child { border-right: 0; }
  .fases-leg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .fases-leg div { display: block; padding: 0; }
  .fases-leg dd { margin-top: 4px; }
}

/* Teclado aberto no campo de texto da prova: a barra fixa do pé subiria
   junto e cobriria o próprio campo. Enquanto ele tem foco, a barra volta
   para o fluxo, logo abaixo do campo. */
form:has(input[type="text"]:focus) .barra-acao { position: static; padding-inline: 0; background: none; border-top: 0; }

/* Celular deitado: a barra fixa não pode comer um terço da tela. */
@media (max-height: 480px) and (orientation: landscape) {
  .barra-acao { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  .barra-acao .botao.principal { min-height: 48px; font-size: var(--t-nav); }
  .bandeja { display: none; }
  .pagina.com-barra { padding-bottom: 96px; }
}

/* celular: cabeçalho numa linha só, marca e as duas áreas */
@media (max-width: 459px) {
  .marca { gap: 8px; padding: 0 12px; font-size: 14px; letter-spacing: .02em; }
  .marca img { height: 24px; }
  .area { padding: 0 13px; font-size: 16px; }
}
/* telas estreitas (até 359 px): a marca fica só com o "e" e os números
   ganham um pouco de largura (DESENVOLVIMENTO cabe inteiro em 320 px) */
@media (max-width: 359px) {
  .marca span { display: none; }
  .numero { padding: 10px 10px 12px; }
  .numero .rotulo { font-size: 12px; letter-spacing: 0; }
  .numero b { font-size: 28px; }
}