/* ============================================================================
   BORDADOS SMANIOTTO — DESIGN SYSTEM v1 · MEDIDOR DE TAPETE (fase 10)

   O QUE ESTA FOLHA É. O componente `.medidor` já existe em `padroes.css`, e é
   ele que desenha a mesa, as réguas, a prévia do tapete e o resumo. Nada disso
   foi refeito aqui. O que esta folha acrescenta são as três coisas que o
   medidor de verdade precisa e o de demonstração não tinha:

     1. o canto que se arrasta com o dedo (`.tapete-previa__pega`);
     2. os botões de mais e menos ao lado de cada campo (`.medidor__passo`);
     3. o aviso que muda de papel e o botão que conserta a medida.

   ⚠️ TUDO O QUE ESTÁ AQUI PRECISA VOLTAR PARA O `assets/ds1.html`. Enquanto não
   voltar, o design system está desatualizado em relação ao site — que é
   exatamente o que a regra do projeto proíbe. O arquivo não foi editado nesta
   sessão porque outras duas fases estavam sendo escritas ao mesmo tempo e o
   ds1.html é compartilhado; o relatório da fase traz o trecho pronto para colar.

   ZERO VALOR SOLTO. Toda cor, todo espaço e todo tamanho abaixo saem dos tokens
   de `tokens.css`. Não há um pixel escrito à mão nesta folha.
   ========================================================================== */

/* ── A PÁGINA DO MEDIDOR ───────────────────────────────────────────────────
   A régua tem que caber na primeira dobra. A seção padrão abre com 6rem de
   respiro em cima, e num monitor de 900px isso empurra o medidor para baixo do
   corte — a pessoa chega numa página que promete um desenho e mostra um texto.
   O respiro de baixo continua o de sempre: ali ele separa desta seção a lista
   de tapetes do catálogo. */
.medidor-pagina { padding-block: var(--esp-7) var(--esp-9); }
.medidor-pagina__cabeca { margin-bottom: var(--esp-6); }
/* Os três argumentos, depois do medidor e em fila quando há largura para isso. */
.medidor-pagina__pontos { margin-top: var(--esp-7);
                          grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-5); }
@media (max-width: 900px) { .medidor-pagina__pontos { grid-template-columns: minmax(0, 1fr); gap: var(--esp-3); } }

/* O estado vazio do design system nasceu para fundo claro: o ícone é desenhado
   em --borda-forte, que sobre a tinta é escuro sobre escuro, e o texto em
   castanho. Aqui ele acontece dentro da seção tinta — a única no site em que o
   medidor pode sumir —, então precisa da mesma inversão que os botões já têm. */
.secao--tinta .vazio { color: rgb(var(--bruma-rgb) / .8); }
.secao--tinta .vazio > svg { color: var(--rose); }

/* O halo da seção. No ds1.html o tamanho e a posição estavam escritos num
   `style=""` dentro do HTML, onde token nenhum alcança. Aqui eles viram tokens:
   26rem é --largura-coluna, 8rem é --esp-10 e 6rem é --esp-9. */
.medidor__brilho {
  width: var(--largura-coluna); height: var(--largura-coluna);
  top: calc(var(--esp-10) * -1); right: calc(var(--esp-9) * -1);
}

/* ── OS CAMPOS DE MEDIDA ───────────────────────────────────────────────────
   Número é dado, e dado se lê na fonte de dado: alinhado ao centro, entre os
   dois botões, é onde o olho procura o valor num controle de mais e menos. */
.medidor__passo { display: flex; align-items: center; gap: var(--esp-2); }
.medidor__passo .btn--icone { flex: none; }
.medidor__passo .campo__controle {
  flex: 1; min-width: 0; text-align: center;
  font-family: var(--fonte-dado); letter-spacing: var(--tr-dado);
}

/* Erro sobre fundo tinta. O --erro do sistema é um vermelho escuro, feito para
   fundo claro; sobre a tinta ele desaparece. O carmim fraco é a mesma família
   de alerta com contraste sobre escuro, e não se confunde com o rose do foco. */
.secao--tinta .campo[data-estado='erro'] .campo__controle {
  border-color: var(--carmim-fraco);
  box-shadow: 0 0 0 3px rgb(var(--carmim-rgb) / .3);
}

/* ── O AVISO DA LARGURA ────────────────────────────────────────────────────
   Um lugar só para as três mensagens — limite normal, medida acima do rolo e
   medida inválida. Três avisos em três cantos seriam três coisas para procurar.
   Recusar sem dizer o que fazer deixa a pessoa parada: por isso o botão que
   preenche o campo com a largura do rolo mora dentro do próprio aviso. */
.medidor__aviso { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-2); }
.medidor__aviso[data-estado='atencao'] .campo__ajuda,
.medidor__aviso[data-estado='erro'] .campo__ajuda {
  color: var(--rose); font-weight: var(--peso-medio);
}
.medidor__corrigir { font-family: var(--fonte-dado); letter-spacing: var(--tr-dado); }

/* Duas ações empilhadas e do mesmo tamanho. Lado a lado, uma competiria com a
   outra; empilhadas, a de baixo — o WhatsApp da loja, que é o destino do tapete
   personalizado — é a que fica debaixo do polegar no celular. */
.medidor__acoes { display: grid; gap: var(--esp-3); }

.medidor__legenda { margin-top: var(--esp-4); }

/* ── A MESA DE MEDIÇÃO ─────────────────────────────────────────────────────
   O palco ganha folga à direita e embaixo por DOIS motivos: o canto que se
   arrasta precisa de espaço para transbordar sem sair da caixa, e um tapete
   colado na borda parece cortado em vez de medido.

   Esta folga NÃO É DECORAÇÃO: o medidor.js lê o preenchimento desta regra para
   saber quantos pixels sobram para o desenho. É por isso que a escala do
   desenho não tem nenhum fator mágico escrito no JavaScript — a folga é um
   token de espaço, aqui, e o JavaScript só pergunta quanto ela vale. */
.mesa__palco { padding: 0 var(--esp-6) var(--esp-6) 0; }

/* O primeiro quadro, antes de o JavaScript medir a caixa: a prévia já sai do
   servidor com a proporção certa e a largura proporcional à largura do rolo.
   O medidor.js sobrescreve com pixels na primeira atualização. */
.tapete-previa {
  width: calc(var(--tapete-larg, 1) / var(--tapete-escala, 1) * 100%);
  aspect-ratio: var(--tapete-larg, 1) / var(--tapete-alt, 1);
  max-width: 100%; max-height: 100%;
}

/* ── A ESCOLHA DA LINHA ────────────────────────────────────────────────────
   Substitui, de uma vez, TRÊS caminhos que faziam a mesma coisa e se
   contradiziam (auditoria de UX de 5/8/2026):

     1. um `<select>` "Linha do tapete";
     2. um link "Trocar de tapete" na faixa de identidade, que rolava a página
        inteira até os cards do fim;
     3. quatro botões "Medir na linha X" nesses cards, que rolavam de volta.

   Três problemas de uma vez. A faixa de identidade repetia, com foto, o mesmo
   dado do `<select>` que vinha logo abaixo. O nome da coisa mudava três vezes
   na mesma página — "trocar de TAPETE", "LINHA do tapete", "ver a PEÇA" —, e a
   pessoa clicava num jogo de banheiro para o medidor abrir mostrando um tapete
   de sala. E a Belga, que corta por metro mas não tem peça no catálogo, virava
   beco sem saída: quem estivesse nela e clicasse em "Trocar de tapete" rolava
   até o fim e não encontrava Belga em lugar nenhum.

   Aqui a escolha é um toque, sem rolagem, com a foto visível ANTES de escolher
   — antes ela só aparecia depois. E some a ambiguidade de nome: são quatro
   linhas, mostradas como quatro linhas.

   POR QUE ISTO É DISCRETO. A assinatura desta página é a mesa de medição e o
   canto que se arrasta; um seletor que competisse com ela roubaria a atenção do
   que a página existe para mostrar. Nada de sombra, nada de escala no hover: a
   borda clareia, e a seleção usa o mesmo anel de duas camadas do `.chip-cor`
   (folga na cor do que está atrás, depois o halo no acento). */
/* É um `<fieldset>` porque quatro rádios com a mesma pergunta são um grupo, e a
   pergunta é a `<legend>` — é assim que o leitor de tela anuncia "Linha do
   tapete, Soft, 1 de 4". O fieldset chega com borda e recuo próprios do
   navegador; o `.campo` do sistema é que manda no espaçamento. */
.tapete-linhas__campo { padding: 0; margin: 0; border: 0; min-width: 0; }
.tapete-linhas__campo > legend { padding: 0; }
.tapete-linhas {
  display: grid; gap: var(--esp-3);
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}
.tapete-linhas__opcao { position: relative; display: block; cursor: pointer; }
/* O rádio de verdade continua lá, recebendo teclado e leitor de tela; o que se
   vê é o rótulo. Mesma técnica do `.opcao` do sistema. */
.tapete-linhas__opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.tapete-linhas__cartao {
  display: grid; gap: var(--esp-2);
  padding: var(--esp-2); border-radius: var(--rad-2);
  border: var(--fio-espessura) solid var(--borda-inversa);
  background: rgb(var(--bruma-rgb) / .04);
  transition: border-color var(--dur-1) var(--suave), box-shadow var(--dur-1) var(--suave);
}
.tapete-linhas__opcao:hover .tapete-linhas__cartao { border-color: rgb(var(--bruma-rgb) / .38); }
.tapete-linhas__foto {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--rad-1); background: rgb(var(--bruma-rgb) / .08);
}
/* Linha sem foto cadastrada — hoje é o caso da Belga. Uma régua desenhada no
   lugar, e não a foto de outra linha para tapar buraco: trocar o produto na
   cara do cliente é pior do que admitir que a foto ainda não existe. */
.tapete-linhas__sem-foto {
  display: grid; place-items: center;
  color: rgb(var(--bruma-rgb) / .32);
}
.tapete-linhas__sem-foto svg { width: var(--esp-6); height: var(--esp-6); }
.tapete-linhas__nome {
  font-family: var(--fonte-titulo); font-size: var(--t-h6);
  font-variation-settings: 'opsz' 24, 'SOFT' 40;
  color: var(--algodao); text-align: center;
}
/* O mesmo anel de seleção do chip de cor: folga na cor do que está atrás e
   depois o halo no acento da seção — que sobre a tinta é o rose. */
.tapete-linhas__opcao input:checked + .tapete-linhas__cartao {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--sob), 0 0 0 4px var(--anel-selecao);
}
.tapete-linhas__opcao input:focus-visible + .tapete-linhas__cartao {
  outline: 2px solid var(--rose); outline-offset: 3px;
}

/* ── A FAIXA `.medidor-peca` FOI APOSENTADA EM 5/8/2026 ────────────────────
   Ela respondia "qual tapete eu estou orçando?" com foto, nome e um botão de
   trocar. Cumpriu e saiu: repetia, com foto, o mesmo dado do seletor de linha
   que vinha logo abaixo — dois controles adjacentes para a mesma coisa — e o
   botão de trocar mandava a pessoa rolar a página inteira para voltar por outro
   caminho. Quem faz as duas coisas agora é a fileira de cartões acima, em um
   toque e com a foto visível ANTES da escolha.

   O que sobreviveu dela é a regra que continua valendo para os cartões: a
   miniatura é FIEL. Proporção preservada, foto inteira, do jeito que ela foi
   tirada. A ideia anterior era preencher o retângulo da medida com a felpa da
   cor, ampliada até sobrar só material; o acervo não sustenta, porque as fotos
   de tapete vêm de três sessões diferentes e um ponto de mira fixo acerta em
   algumas e, nas outras, amplia o quarto em vez do tapete — numa delas o
   recorte cai numa bola de basquete. Foto errada de produto é pior do que
   retângulo abstrato, porque o retângulo não promete nada.

   O CSS saiu inteiro, e não ficou comentado: componente que ninguém usa é a
   documentação morta que a regra deste projeto existe para evitar. Está no git.
   ────────────────────────────────────────────────────────────────────────── */

/* ── O CANTO QUE SE ARRASTA ────────────────────────────────────────────────
   É a razão de esta página existir num celular. Digitar 2,35 num campo é
   trabalho; puxar o canto até o tapete ficar do tamanho do cômodo é a coisa que
   a pessoa faz sem ler instrução nenhuma.

   O alvo tem --alt-controle (44px), o mínimo de qualquer coisa que se aperta
   com o dedo neste sistema, e fica centrado NO canto — metade para dentro,
   metade para fora. Assim continua alcançável mesmo quando o tapete desenhado
   é menor que o próprio alvo.

   `touch-action: none` está SÓ aqui, e não na prévia inteira: fora deste
   quadradinho o dedo continua rolando a página, como em qualquer outro lugar
   do site. Bloquear a rolagem no tapete todo seria prender a pessoa na tela. */
.tapete-previa__pega {
  position: absolute; z-index: 2;
  right: calc(var(--alt-controle) / -2); bottom: calc(var(--alt-controle) / -2);
  width: var(--alt-controle); height: var(--alt-controle);
  display: grid; place-items: center;
  cursor: nwse-resize; touch-action: none;
}
/* O desenho da pega: o mesmo canto pontilhado do contorno da prévia, sólido, do
   tamanho de um traço de régua. */
.tapete-previa__pega::before {
  content: ''; width: var(--esp-4); height: var(--esp-4);
  background: var(--rose); border: var(--fio-espessura) solid var(--tinta);
  transition: transform var(--dur-1) var(--saida);
}
.tapete-previa__pega:hover::before { transform: scale(1.2); }
.mesa--clara .tapete-previa__pega::before { background: var(--carmim); border-color: var(--superficie); }

/* ── MEDIDA INVÁLIDA: O DESENHO PRECISA PARAR DE AFIRMAR ───────────────────
   Com um campo vazio ou com texto que não é número, a área, a medida final e a
   etiqueta viram travessão — e o retângulo continuava desenhado, do tamanho da
   última medida válida. A tela mostrava um tapete de um tamanho que não
   correspondia a nada, com um "—" dentro. Era o único momento em que o desenho
   mentia, numa página cujo argumento inteiro é que ele responde.

   Apagar o retângulo seria pior: some a referência de escala e a régua fica
   vazia sem explicação. Ele desbota — continua dizendo "era mais ou menos
   assim", e para de afirmar que É assim. */
.mesa[data-estado='invalida'] .tapete-previa { opacity: .3; }
.mesa[data-estado='invalida'] .tapete-previa__pega { opacity: 0; pointer-events: none; }
.tapete-previa { transition: width var(--dur-2) var(--saida), height var(--dur-2) var(--saida),
                             opacity var(--dur-2) var(--suave); }

/* Enquanto o dedo está no canto, a prévia não pode ter transição: o desenho
   tem que colar no dedo. A transição volta quando o dedo sai, para quem digita
   continuar vendo o tapete crescer. */
.tapete-previa[data-arrastando='true'] { transition: none; }
.tapete-previa[data-arrastando='true'] .tapete-previa__pega::before { transform: scale(1.2); }

/* ── RESPONSIVO ────────────────────────────────────────────────────────────
   O `.medidor` já vira uma coluna só em 1080px e o `.medidor__par` em 640px,
   pelo padroes.css. O que falta é a folga do palco: em tela estreita ela come
   um pedaço grande demais do desenho. */
@media (max-width: 640px) {
  .mesa__palco { padding: 0 var(--esp-5) var(--esp-5) 0; }
}

/* ── OS CARDS DE TAPETE ────────────────────────────────────────────────────
   Duas ações num rodapé de card de 290px lado a lado obrigam as duas a quebrar
   o rótulo em duas linhas — e "Medir na linha / Soft" partido no meio deixa de
   ser uma frase. Empilhadas, cada uma ocupa a largura toda e continua sendo o
   mesmo botão fantasma do catálogo. */
.tapete-pecas .card__pe { flex-direction: column; align-items: stretch; gap: var(--esp-2); }
.tapete-pecas .card__pe .btn { justify-content: space-between; }

/* ── MOVIMENTO REDUZIDO ────────────────────────────────────────────────────
   A regra geral de `padroes.css` já zera toda transição. O que esta regra
   garante é o que o plano pede em letra: com movimento reduzido ligado, o
   desenho CONTINUA ATUALIZANDO — só que sem animação. Nada aqui esconde,
   pausa ou congela o medidor. */
@media (prefers-reduced-motion: reduce) {
  .tapete-previa, .tapete-previa__pega::before { transition: none; }
}