/* Sugestões — o canal de pedidos sobre o próprio app.

   Um componente só: o cartão do pedido. O roteiro é um laudo — rótulo em mono
   na coluna da esquerda, resposta em texto na direita, régua hairline entre os
   blocos. A forma não é enfeite: é o que deixa ler as quatro respostas na
   diagonal, que é como se lê uma fila de pedidos, e é o que faz "como conferir"
   nunca passar despercebido.

   Proposta aprovada em docs/mockup-sugestoes.html. */

/* Sem moldura fechada: a régua de cima separa um pedido do outro, como as
   linhas da fila. Card com sombra seria a cara SaaS que este app recusa. */
.pedido {
  border-top: 1px solid var(--line-strong);
  padding: 16px 0 20px;
}

/* Réguas não se duplicam: o título da seção já é a régua do primeiro cartão
   dela. Ajuste contextual, então :where() — a especificidade continua sendo a
   do componente. */
:where(.section-rule) + .pedido { border-top: 0; padding-top: 4px; }

/* A linha de identificação: o que é, quanto dói, onde está, desde quando. */
.pedido-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}

/* A idade empurrada para a ponta: é o dado que ordena a fila depois da
   urgência, e na ponta ele se lê em coluna de cima a baixo. */
.pedido-idade {
  margin-inline-start: auto;
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
}

.pedido-roteiro {
  margin: 0;
  display: grid; grid-template-columns: 148px 1fr; gap: 2px 20px;

  & > div {
    display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
    padding: 8px 0; border-top: 1px solid var(--line);
  }

  & > div:first-child { border-top: 0; padding-top: 0; }

  & dt {
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-faint);
    padding-top: 3px;
  }

  & dd { margin: 0; font-size: 15px; text-wrap: pretty; }
}

/* Num telefone a coluna de rótulo não cabe sem espremer a resposta a quatro
   palavras por linha: o rótulo sobe para cima dela. */
@media (max-width: 620px) {
  .pedido-roteiro {
    grid-template-columns: 1fr;

    & > div { display: block; }
    & dt { padding-top: 0; margin-bottom: 4px; }
  }
}

/* O pé: o contexto que ninguém digitou, a imagem se houver, e as ações. */
.pedido-pe {
  margin-top: 16px;
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
}

.pedido-ctx {
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  display: flex; flex-direction: column; gap: 3px;
  overflow-wrap: anywhere;
}

.pedido-acoes { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

/* Apagar é irreversível e não é o caminho esperado: vai para a outra ponta do
   grupo. Classe própria, e não o `.push` de buttons.css, porque `.push` só
   existe dentro de `.actions` — e duas regras de mesma especificidade em
   arquivos cuja ordem é irrelevante é exatamente o que a convenção proíbe. */
.pedido-excluir { margin-inline-start: 18px; }

/* ── o que já fechou ──────────────────────────────────────────────────────
   Recolhido: a lista existe para responder "isso já foi resolvido?", e a
   resposta é o título. O roteiro inteiro só abre para quem perguntar.

   O <summary> mantém o display padrão de propósito: grid ou flex nele quebra
   o toque de abrir no Safari. */
.pedido-fechado {
  border-top: 1px solid var(--line);
  padding: 10px 0;

  & > summary {
    cursor: pointer; list-style: none;
    font-size: 14px; color: var(--ink-muted);

    &::-webkit-details-marker { display: none; }
    &:hover { color: var(--ink); }
  }

  & .state { margin-inline-end: 8px; }

  & .pedido-roteiro { margin-top: 14px; }
}

/* ── a bolha ──────────────────────────────────────────────────────────────
   O canal sai do masthead e vira um alvo fixo: relatar não é uma ação DA
   tela, é uma ação SOBRE ela, e no masthead disputava lugar com o que a tela
   faz. Fixo, ele também não depende de rolar até o topo.

   ONDE: na MARGEM, ao lado da folha — não dentro dela. A folha é o documento, e
   ferramenta não se deita sobre documento: lá a bolha cobriria a última linha
   da lista e obrigaria a folha inteira a abrir um rodapé vazio só para lhe dar
   chão. Fora, ela não custa um pixel de conteúdo em tela nenhuma.

   ONDE NA MARGEM: no canto, encostada na borda da tela. A mira da calha foi
   para o lado de dentro da margem, colada na folha (ver folha.css) — deixar a
   bolha no meio era pôr duas coisas quase no mesmo prumo, a poucos pixels de
   diferença, que é o desencontro que se vê sem saber nomear. Nos extremos
   opostos da mesma coluna, cada uma é a sua.

   O preço, e é pequeno: a calha ocupa essa margem inteira e é clicável toda, de
   topo a rodapé. A bolha come dela um círculo de 44px no canto de baixo. Dá
   para pagar porque a mira da calha é centrada na vertical — o canto inferior é
   a parte dela onde ninguém aponta.

   SEM SOMBRA, e isto contraria o reflexo: profundidade neste app é régua, e
   sombra é só do <dialog>, que flutua de verdade. O que separa a bolha da
   folha é o fundo cheio e o contorno — é o mesmo recurso do .btn, redondo. */
.bolha {
  position: fixed; z-index: 9;
  inset-block-end: 20px;
  inset-inline-end: 20px;

  /* 44px é o piso do alvo de toque, não um número escolhido no olho: abaixo
     disso o polegar erra, e uma bolha discreta não pode custar duas tentativas.
     O tamanho é o mínimo; quem recua é a tinta. */
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent-hover);
  cursor: pointer;

  /* Apagada em repouso, inteira quando procurada. A bolha está em TODA tela e
     não é o assunto de nenhuma: em opacidade cheia ela é a mancha mais forte
     da página, competindo com o "＋ Novo cadastro" e com a linha que a pessoa
     veio resolver. Apagar não é escondê-la — o alvo continua do mesmo tamanho,
     e quem foi atrás acende antes de chegar — o alvo é de 44px com tinta de
     35%, que é o contrário de um botão pequeno. */
  opacity: .35;
  transition: background .12s ease, translate .12s ease, opacity .12s ease;

  &:is(:hover, :focus-visible) {
    opacity: 1;
    background: var(--accent-hover);
    translate: 0 -2px;
  }
}

/* Elemento fixo entra em toda página impressa, e a autorização imprime: a
   bolha é ferramenta, não documento. O @media print de auth-doc.css já esconde
   todo filho direto de <body> que não seja a autorização — e é por isso que a
   bolha mora lá, irmã dos modais e da calha, e não dentro do <main>. */