:root {
  --paper: #f4eedf; --paper-deep: #e6dcc8; --ink: #1f2926;
  --rail: #2c6170; --punch: #a34a3d; --rule: #2b3631;
  --tinta-fraca: #4a514e;

  /* Escala de corpo: DUAS medidas na prosa, e só. Antes eram três
     (18 / 16 / 14,72px), e a menor caía 18% abaixo do corpo — diferença grande
     o bastante para o olho registrar troca de voz, mas não o bastante para
     parecer intencional. Parágrafo comprido nesse tamanho vira borrão cinza.
     `em` e não `rem`: acompanha o corpo do cartão se ele mudar. */
  --secundario: .875em;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(31,41,38,.045) 1px, transparent 1px),
    linear-gradient(rgba(31,41,38,.035) 1px, transparent 1px),
    var(--paper);
  background-size: 42px 42px;
  color: var(--ink);
  font: 18px/1.5 Georgia, "Times New Roman", serif;
}
.request-card {
  width: min(46rem, 100%);
  padding: clamp(1.2rem, 4vw, 3rem);
  background: rgba(244,238,223,.92);
  border: 2px solid var(--rule);
  box-shadow: 8px 8px 0 rgba(31,41,38,.18);
}
.request-card--narrow { max-width: 40rem; margin: 2rem auto; }
.kicker { margin: 0 0 .5rem; color: var(--rail); text-transform: uppercase; letter-spacing: .18em; font: .8rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
h1 { margin: 0 0 1rem; font-size: clamp(2.1rem, 7vw, 4.2rem); line-height: .97; letter-spacing: -.05em; }
.intro { margin: 0 0 1.25rem; color: var(--tinta-fraca); }

/* Os passos antes do formulário. Lista numerada em vez de parágrafo porque
   são três coisas em ordem — em prosa corrida viravam cinco linhas de letra
   miúda que ninguém lê. */
.passos {
  margin: 0 0 1.75rem;
  padding-left: 1.5rem;
  font-size: var(--secundario);
  color: var(--tinta-fraca);
}
.passos li { margin: 0 0 .5rem; padding-left: .2rem; }
.passos li::marker { color: var(--rail); font-weight: 700; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .35rem; font-weight: 700; }
.required { color: var(--punch); }
.input-group {
  display: flex;
  align-items: center;
  border: 2px solid var(--ink);
  background: rgba(255,255,255,.38);
}
.input-group input {
  border: 0;
  background: transparent;
  padding: .75rem;
  font: 1rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);

  /* `width: 0` e `min-width: 0` não são enfeite. Um <input> sem o atributo
     `size` vale 20 caracteres de largura intrínseca, e como item flex ele
     herda `min-width: auto` — ou seja, o navegador se recusa a encolhê-lo
     abaixo desses 20 caracteres. Em fonte monoespaçada isso dá ~234px, que
     somados ao sufixo "@valis.fyi" passam de 340px. Essa largura mínima sobe
     em cascata pelo label, pelo form e pelo cartão (todos itens de grid, todos
     com `min-width: auto`) e estoura a viewport: num telefone de 360px o
     cartão ia a 389px e o lado direito era cortado. Zerar os dois devolve o
     controle ao `flex-grow`, que é quem deveria mandar aqui. */
  flex: 1 1 0;
  width: 0;
  min-width: 0;
}
.input-group .suffix {
  padding-right: .75rem;
  font: 1rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
  opacity: .65;
  user-select: none;
}
input, textarea {
  width: 100%;
  border: 2px solid var(--ink);
  background: rgba(255,255,255,.38);
  color: var(--ink);
  padding: .75rem;
  font: 1rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
textarea { min-height: 9rem; resize: vertical; }
.check { display: flex; align-items: start; gap: .6rem; font-weight: 400; }
.check input { width: auto; margin-top: .35rem; }
.cf-turnstile { min-height: 4rem; max-width: 100%; overflow: hidden; }
/* Texto de apoio de um campo: cola embaixo dele de propósito (margem negativa
   em cima, zero embaixo). Só serve para isso — como parágrafo solto fica
   sufocado, e foi o que aconteceu quando usei esta classe fora do formulário. */
.help { margin: -.2rem 0 0; color: var(--tinta-fraca); font-size: var(--secundario); font-weight: 400; }
.submit-note { margin: -.25rem 0 .25rem; color: var(--tinta-fraca); font-size: var(--secundario); }

/* Rodapé do cartão. Fica depois do formulário para não competir com o botão
   de enviar — antes era um parágrafo de links no meio do caminho. */
.rodape {
  margin: 1.75rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(31,41,38,.18);
  color: var(--tinta-fraca);
  font-size: var(--secundario);
}
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
button { border: 2px solid var(--ink); background: var(--ink); color: var(--paper); padding: .75rem 1rem; cursor: pointer; font: 700 1rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
button:disabled { opacity: .55; cursor: not-allowed; }
.actions a.secondary {
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  padding: .75rem 1rem;
  text-decoration: none;
  cursor: pointer;
  font: 700 1rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: inline-block;
}
.preview-list { line-height: 2; font-family: monospace; font-size: 1.1rem; padding-left: 1.5rem; }
a { color: var(--rail); }

/* Armadilha para robô: fora da tela, mas não display:none — alguns robôs
   ignoram campos escondidos desse jeito, e o objetivo é que preencham. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Aviso do formulário (js/request-form.js). Sem JavaScript nunca aparece:
   o erro chega como página inteira, vinda do serviço. */
.form-aviso { margin: 0; padding: .7rem .85rem; border: 2px solid var(--ink); }
.form-aviso[data-tipo="erro"] { border-color: var(--punch); color: var(--punch); background: rgba(163,74,61,.07); }
.form-aviso[data-tipo="espera"] { opacity: .7; }

/* Fila web (/admin). Mesma folha do formulário: é a mesma casa. */
.pedido { border: 2px solid var(--ink); padding: 1rem; margin: 0 0 1rem; background: rgba(255,255,255,.3); }
.pedido h2 { margin: 0 0 .2rem; font-size: 1.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -.02em; }
.pedido__id { color: var(--rail); font-weight: 400; }
.pedido__meta { margin: 0 0 .6rem; color: var(--tinta-fraca); font-size: var(--secundario); }
.motivo { margin: 0 0 .9rem; white-space: normal; }
.linha-acoes { display: flex; gap: .6rem; flex-wrap: wrap; }
button.recusar { background: transparent; color: var(--ink); }

/* Link de acompanhamento e link do convite. Precisa ser fácil de copiar e
   difícil de não ver: é a única coisa que liga a pessoa ao pedido. */
.claim {
  margin: 0 0 1rem;
  padding: .8rem;
  border: 2px dashed var(--rail);
  background: rgba(255,255,255,.45);
  font: var(--secundario)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}
.claim a { color: var(--rail); }