/* ------------------------------------------------------------------------------ a loja
 *
 * O dono monta o catalogo aqui e o bot do painel o vende no Discord. Nada nesta tela toca
 * saldo — o que ela edita e configuracao, e a diferenca precisa ficar visivel: nenhum numero
 * daqui e dinheiro de ninguem ate a compra acontecer, do outro lado.
 */

.problemas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.problema {
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--raio-m);
  border: 1px solid var(--linha);
  background: var(--vidro);
  font-size: 0.87rem;
  color: var(--texto-fraco);
}

/* Erro impede gravar; aviso ja gravou. Iguais na tela, o dono procuraria conserto no que nao
 * precisava de conserto. */
.problema--erro {
  border-color: rgba(251, 113, 133, 0.35);
  background: rgba(251, 113, 133, 0.07);
}

.problema--erro .selo { color: var(--erro); border-color: rgba(251, 113, 133, 0.4); }

.problema--aviso {
  border-color: rgba(251, 191, 36, 0.3);
  background: rgba(251, 191, 36, 0.06);
}

.problema--aviso .selo { color: var(--atencao); border-color: rgba(251, 191, 36, 0.35); }

/* O botao de acao empurrado para a direita do cabecalho da secao. */
.acao-secao { margin-left: auto; min-height: 36px; padding: 0 14px; font-size: 0.84rem; }

/*
 * Um item da loja e um CARTAO, e nao uma linha de tabela.
 *
 * Empilhados so com uma divisoria entre eles, trinta produtos viram uma parede cinza em que
 * nada se destaca — nem o que o ponteiro esta em cima, nem o que esta aberto. Separando por
 * moldura e elevacao, a lista passa a ter unidades: o olho pousa numa e nao em "a lista".
 */
.item-loja {
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--vidro);
  overflow: hidden;
  transition:
    border-color var(--t-rapido) var(--entrada),
    background var(--t-rapido) var(--entrada),
    transform var(--t-rapido) var(--saida);
  /* Entrada escalonada; o atraso vem de `--i`, e tem teto. Ver `.bloco > .item-loja`. */
  animation: surgir-acima var(--t-lento) var(--saida) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}

.item-loja:hover { border-color: var(--linha-viva); background: var(--vidro-alto); }

/* O item ABERTO fica marcado mesmo sem o ponteiro: e o unico jeito de saber onde se estava
   depois de rolar ate o fim de um formulario longo. */
.item-loja:has(.item-alvo[aria-expanded='true']) {
  border-color: var(--linha-viva);
  background: var(--vidro-alto);
}

.item-cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 12px;
  background: transparent;
}

/*
 * O cabecalho inteiro e o alvo de abrir — menos o botao de apagar.
 *
 * Alvo pequeno (so a setinha) obrigaria mira; alvo grande demais engoliria o "Delete" e o item
 * se expandiria no mesmo instante em que some. Por isso o botao fica FORA deste elemento.
 */
.item-alvo {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 4px 14px 18px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.item-alvo:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: -2px; }

/*
 * A seta e o estado, e nao um enfeite.
 *
 * Feita de borda em vez de caractere: um glifo herdaria a fonte e mudaria de tamanho entre
 * sistemas, e no Windows a seta unicode desalinha da linha de base.
 */
.item-seta {
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--texto-tenue);
  border-bottom: 2px solid var(--texto-tenue);
  transform: rotate(-45deg);
  transition: transform var(--t-medio) var(--saida), border-color var(--t-rapido);
}

.item-alvo[aria-expanded='true'] .item-seta {
  transform: rotate(45deg);
  border-color: var(--roxo-claro);
}

.item-alvo:hover .item-seta { border-color: var(--texto); }

/*
 * O "Delete" de cada item: presente, mas discreto ate ser procurado.
 *
 * Trinta botoes vermelhos visiveis ao mesmo tempo deixam de ser lidos como aviso — viram fundo.
 * `opacity` mantem o botao alcancavel por Tab, e `focus-within` o revela para quem navega por
 * teclado; `display: none` o tiraria de ambos.
 */
.item-cabeca > .fantasma {
  opacity: 0;
  transition: opacity var(--t-rapido) var(--entrada), color var(--t-rapido) var(--entrada);
}

.item-loja:hover > .item-cabeca > .fantasma,
.item-loja:focus-within > .item-cabeca > .fantasma { opacity: 1; }

/* Sem ponteiro nao ha hover, e esconder viraria esconder de vez. */
@media (hover: none) {
  .item-cabeca > .fantasma { opacity: 1; }
}

/*
 * O preco ganha respiro e a moeda por tras.
 *
 * Espremido entre o nome e o botao, ele era so um numero dourado. Com o fundo proprio ele vira
 * uma FICHA — que e o que ele representa — e o olho separa "quanto custa" de "como se chama"
 * sem precisar do espacamento.
 */
#lista-produtos .item-conta {
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--ouro) 22%, transparent);
  border-radius: var(--raio-pilula);
  background: var(--ouro-fraco);
  font-size: 0.82rem;
}

/*
 * A busca aparece so quando ha o bastante para valer. Ver `BUSCA_A_PARTIR_DE` em `loja.js`.
 */
.busca-loja { margin: 0 0 4px; }
.busca-loja input { width: 100%; }

.item-emoji { font-size: 1.15rem; line-height: 1; flex: none; }
.item-nome { font-weight: 620; font-size: 0.94rem; flex: 1; min-width: 0; }
/*
 * A conta da direita: quantos produtos numa categoria, ou o PRECO de um produto.
 *
 * O preco vem em ouro porque e a unica coisa desta tela que e dinheiro — o mesmo acento do saldo
 * do jogador. A contagem de produtos continua discreta: ela e contexto, nao valor.
 */
.item-conta {
  color: var(--texto-fraco);
  flex: none;
  font-variant-numeric: tabular-nums;
}

#lista-produtos .item-conta { color: var(--ouro); font-weight: 600; }

/*
 * Os campos em grade, e nao empilhados.
 *
 * Um produto tem nove campos; em coluna unica eles viram uma tira de dois metros, e o dono
 * perde de vista o que ja preencheu. `auto-fit` deixa a grade virar coluna sozinha no celular.
 */
.item-forma {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 18px;
  padding: 16px 18px 20px;
}

.item-forma .campo { display: flex; flex-direction: column; gap: 5px; }

.item-forma label {
  font-family: var(--maquina);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.dica-campo { margin: 0; color: var(--texto-fraco); font-size: 0.76rem; }

/* A area de entrega ocupa a linha inteira: o campo de comandos e o de argumentos sao textarea,
 * e espremidos numa coluna de 230px nao mostram nem uma linha inteira. */
.item-forma .entrega {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 18px;
}

.item-forma textarea {
  font-family: var(--maquina);
  font-size: 0.82rem;
  resize: vertical;
}

/*
 * A barra de gravacao flutua acima da barra de abas.
 *
 * Flutuante porque a lista de produtos e longa: com o botao no fim da pagina, o dono editaria
 * o primeiro produto e teria de rolar tudo para salvar. E o "Unsaved changes" precisa ser
 * visivel de qualquer altura — o catalogo em edicao nao esta guardado em lugar nenhum.
 */
.barra-salvar {
  position: fixed;
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 18px;
  border-radius: var(--raio-pilula);
  background: var(--elevado);
  border: 1px solid var(--atencao);
  box-shadow: var(--sombra-flutuante);
  z-index: 21;
  max-width: calc(100vw - 32px);
}

.barra-salvar .mono { color: var(--atencao); flex: none; }
.barra-salvar button { min-height: 34px; padding: 0 14px; font-size: 0.84rem; }

/* ===========================================================================
 * O formulario de cada entrega, no lugar do JSON cru
 *
 * O `<textarea>` de argumentos morreu: ele pedia ao dono que digitasse
 * `{"especie":"Tyrannosaurus","crescimento":1}` de cabeca. Agora cada acao tem
 * o controle dela — slider para crescimento, lista para especie, paleta para
 * cor —, e nada aqui pode ser preenchido errado.
 * =========================================================================== */

/* A area dos argumentos ocupa a linha inteira, como a da entrega. */
.argumentos-entrega {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 18px;
}

/* O que o jogador recebe, dito antes dos campos: "Change species" nao conta que
 * o dino e substituido na hora, e e isso que decide o preco que o dono cobra. */
.resumo-entrega {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--texto-fraco);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Slider e leitura na mesma linha: o numero precisa estar onde o polegar esta. */
.linha-slider { display: flex; align-items: center; gap: 12px; }
.linha-slider input[type='range'] { flex: 1; min-width: 0; accent-color: var(--roxo-claro); }

.valor-slider {
  min-width: 3.5ch;
  text-align: right;
  color: var(--texto);
  font-size: 0.85rem;
  /* Tabular: sem ele o numero pula de largura entre 9% e 10% e o slider treme. */
  font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------------ vantagens por cargo */

/*
 * Uma linha por cargo, e cada uma e um cartao.
 *
 * A alternativa era uma tabela com cinco colunas. Ela caberia — e o campo do id do Discord tem
 * dezoito digitos e o do nome e livre, entao numa coluna de tabela os dois ficariam cortados
 * justamente quando o dono precisa conferir se colou o cargo certo.
 */
.vantagem-linha { display: grid; gap: 14px; }

.vantagem-grade {
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.campo-caixa { display: flex; flex-direction: column; gap: 5px; }

.campo-rotulo {
  font-family: var(--maquina);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/*
 * O id do cargo e o campo mais largo: cortado, o dono nao consegue conferir o que colou.
 *
 * Presa a `.vantagem-linha` de proposito. As torneiras de moeda reusam `.vantagem-grade` e o
 * primeiro campo delas e um INTERRUPTOR de 18px — esticado por duas colunas, ele deixava quase
 * meia tela vazia ao lado de uma caixinha de marcar.
 */
.vantagem-linha .vantagem-grade .campo-caixa:first-child { grid-column: span 2; }

@media (max-width: 640px) {
  .vantagem-linha .vantagem-grade .campo-caixa:first-child { grid-column: auto; }
}

/*
 * O efeito ao entrar ocupa a linha inteira, abaixo dos numeros.
 *
 * O formulario dele varia com a acao — crescimento e um slider, especie e uma lista, pintura e
 * uma paleta —, e nenhum deles cabe numa coluna de 190px. Espremido, o dono escolheria a cor
 * errada por nao conseguir ve-la.
 */
.vantagem-efeito {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}

.vantagem-efeito .argumentos-entrega:empty { display: none; }


/* ==================================================== as compras que esperam voce */

/*
 * A fila do que travou no meio.
 *
 * Ela vem antes das categorias na aba, e a razao e de PRAZO: preco e produto esperam o dono ter
 * tempo, e uma compra em `falhaEstorno` e um jogador sem a moeda e sem o item, agora.
 */
#loja-travadas { margin-bottom: 1.6rem; }

.compra-travada {
  padding: 0.7rem 0.9rem;
  border-radius: var(--raio-m);
  background: var(--elevado);
  /*
   * A FAIXA A ESQUERDA carrega a gravidade, e nao o fundo inteiro.
   *
   * Sao tres estados e so um deles e problema. Pintar o cartao todo faria a lista parecer um
   * incendio quando o normal — produto manual esperando a equipe — e o combinado.
   */
  border-left: 3px solid var(--linha);
}

.compra-travada + .compra-travada { margin-top: 0.5rem; }

/* O critico: o jogador esta sem a moeda E sem o item. */
.compra-travada[data-estado='falhaEstorno'] {
  border-left-color: var(--erro);
  background: color-mix(in srgb, var(--erro) 7%, var(--elevado));
}

/* Ninguem sabe se aplicou — nao e perda, e duvida. */
.compra-travada[data-estado='interrompido'] { border-left-color: var(--atencao); }

/* O combinado: a equipe atende. Sem cor: ela nao pede nada. */
.compra-travada[data-estado='pendente'] { border-left-color: var(--texto-tenue); }

.compra-cabeca {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 0.2rem;
}

.compra-preco {
  color: var(--ouro);
  font-variant-numeric: tabular-nums;
}

.compra-porque {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  color: var(--texto-fraco);
  line-height: 1.45;
}

.compra-travada[data-estado='falhaEstorno'] .compra-porque { color: var(--erro); }

.compra-acoes {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

/* O aviso nasce escondido e aparece com o segundo toque, dizendo o que acontece. */
.dois-toques {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dois-toques-aviso {
  font-size: 0.76rem;
  color: var(--atencao);
  max-width: 34ch;
  line-height: 1.4;
}

/*
 * A PREVIA DO CUSTO POR HORA, na renda por tempo.
 *
 * Ouro porque e dinheiro — e a folha reserva o ouro para dinheiro, entao um numero em ouro no meio
 * de um formulario ja diz do que ele trata antes de ser lido.
 *
 * Faixa recuada em vez de mais uma linha de texto: ela muda a cada tecla, e uma frase que se
 * reescreve sozinha no meio de um paragrafo comum vira ruido. Dentro de uma caixa ela vira visor.
 */
.previa-renda {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ouro) 24%, var(--linha));
  background: color-mix(in srgb, var(--ouro) 7%, transparent);
  color: var(--ouro);
  font-size: 0.82rem;
  line-height: 1.5;
}

/*
 * O botao que preenche com quem esta online mora DENTRO da dica do campo.
 *
 * Ele nao e uma acao da secao: e um atalho para preencher aquele campo, e um botao do tamanho dos
 * outros ali disputaria atencao com `Credit everyone`, que e o que nao tem desfazer.
 */
#massa-online {
  align-self: flex-start;
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.72rem;
  /*
   * Borda visivel em REPOUSO, ao contrario do resto dos fantasmas da casa.
   *
   * Os outros vivem na cabeca de um cartao, onde a posicao ja diz que sao acao. Este mora dentro
   * de um campo de formulario, cercado de texto de ajuda — sem contorno ele le como legenda, e o
   * dono nao descobre que existe um atalho para o caso mais comum dele.
   */
  border-color: var(--linha);
}