/* FAST CCA — tema único de todas as telas (o padrão da tela de Início): topo e faixa de título escuros
   pontilhados com o trilho verde, conteúdo em fundo claro. Schibsted Grotesk nos títulos, Source Sans 3 no
   texto, JetBrains Mono em números e rótulos. Cores e uso: docs/CORES.md. O VS9 copia o topo em src/client/index.css. */
:root {
  /* Cores: a lista completa, com o uso de cada uma, está em docs/CORES.md. Não crie cor fora daqui. */
  /* Claro (fundo das telas) */
  --paper: #f2f4f3;        /* fundo da página */
  --paper-raised: #ffffff; /* cartões, campos, linhas de lista */
  --paper-deep: #e6ebe9;   /* hover em fundo claro, trilho de barra */
  --line: #dce2e0;         /* divisórias */
  --line-strong: #c3ccc9;  /* bordas de cartão e campo */
  --ink: #142029;          /* texto e botão principal */
  --ink-hover: #22323f;
  --ink-soft: #4a5763;     /* texto de apoio */
  --ink-faint: #5f6b76;    /* dica, legenda */
  /* Escuro (topo, faixa de título, rodapé) */
  --noite: #0f1922;        /* fundo escuro */
  --noite-linha: #33444f;  /* bordas no escuro */
  --noite-tracejado: #46606b; /* borda tracejada no escuro (área de soltar) */
  --nevoa: #a9b6bd;        /* texto de apoio no escuro */
  --claro: #6fc7b8;        /* destaque no escuro: aba atual, trilho, palavra em destaque */
  --noite-trilho: #1f2f3a; /* fundo do trilho */
  --noite-apagado: #5f7480; /* etapa ainda não alcançada (esteira do VS9) */
  /* Verde-petróleo: ação e "ok" no claro */
  --accent: #0e6e62;
  --accent-soft: #ddefeb;
  --sage: #0a5149;         /* texto "ok" sobre --sage-soft */
  --sage-soft: #ddefeb;
  /* Estados */
  --amber: #c2580f;        /* pendência */
  --amber-soft: #fdf3ea;
  --amber-ink: #7a3606;    /* texto de pendência em destaque sobre --amber-soft */
  --amber-line: #f0c9a6;   /* borda de bloco de pendência */
  --danger: #a12a1f;       /* erro, remover */
  --danger-soft: #f6dcd5;
  /* Séries de gráfico (painel), além de --ink, --accent, --amber e --sage */
  --serie-azul: #3f6f8f;
  --serie-roxo: #8a6a9e;

  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Schibsted Grotesk", system-ui, sans-serif; /* títulos */
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace; /* números, códigos, rótulos em caixa-alta */
  --raio: 6px;
  --sombra: 0 1px 2px rgba(15, 25, 34, .05), 0 6px 20px -8px rgba(15, 25, 34, .12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.textura { background-image: radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0); background-size: 22px 22px; }
.largo { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: max(20px, 2.2vw); padding-right: max(20px, 2.2vw); }

/* ---------- Escuro: topo, faixa de título e rodapé (o padrão da tela de Início) ---------- */
.escuro, .topo, .faixa { background: var(--noite) radial-gradient(circle at 1px 1px, rgba(201, 211, 216, .13) 1px, transparent 0) 0 0 / 24px 24px; color: var(--paper); }
.escuro :focus-visible, .topo :focus-visible, .faixa :focus-visible, .rodape :focus-visible { outline-color: var(--claro); outline-offset: 3px; }
.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 10px max(20px, 2.2vw); padding-top: calc(10px + env(safe-area-inset-top, 0px));
}
.escuro .faixa { background: none; }
.escuro .topo { position: static; background: none; max-width: 1320px; margin: 0 auto; width: 100%; }
.marca { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.marca .logo { display: block; height: 32px; width: auto; flex: none; }
.marca small { color: var(--nevoa); font: 500 12px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding-left: 10px; border-left: 1px solid var(--noite-linha); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a, .nav .quem { color: var(--nevoa); text-decoration: none; font: 500 13px var(--mono); text-transform: uppercase; padding: 6px 12px; transition: color .15s, box-shadow .15s; }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px var(--claro); }
.nav .quem { padding: 0 6px 0 10px; margin-left: 6px; border-left: 1px solid var(--noite-linha); }
.nav a.sair { border: 1px solid var(--noite-linha); border-radius: 999px; color: var(--paper); }
@media (max-width: 680px) {
  .topo { flex-wrap: wrap; gap: 8px; }
  .marca small { display: none; }
  .nav { width: 100%; }
}

/* Faixa de título logo abaixo do topo: <section class="faixa"><div class="largo"><p class="sobre">…</p><h1>…</h1><p>…</p></div></section> */
.faixa .largo { padding-top: 28px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 12px; }
.faixa h1 { margin: 0; color: #fff; font: 900 clamp(40px, 6vw, 72px)/.95 var(--serif); letter-spacing: -.04em; }
.faixa h1 span { color: var(--claro); }
.faixa p { margin: 0; max-width: 64ch; color: var(--nevoa); }
.faixa a { color: var(--claro); }
.faixa .sobre { font: 500 13px var(--mono); color: var(--claro); letter-spacing: .04em; text-transform: uppercase; }
/* Trilho: a "esteira" tracejada que fecha a parte escura. */
.trilho { height: 3px; background: var(--noite-trilho) repeating-linear-gradient(90deg, var(--claro) 0 16px, transparent 16px 48px); animation: esteira 1.6s linear infinite; }
@keyframes esteira { to { background-position: 48px 0; } }
@media (prefers-reduced-motion: reduce) { .trilho { animation: none; } }

.rodape { background: var(--noite); color: var(--nevoa); }
.rodape .largo { padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font: 12px var(--mono); text-transform: uppercase; }
.rodape a { color: var(--nevoa); }

/* ---------- Peças ---------- */
.cartao { background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: 4px; }
.cartao.marcado { border-top: 4px solid var(--accent); } /* o "ticket" da tela de Início */
.etiqueta { display: inline-block; font: 500 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: var(--raio); border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper-raised); font: 600 15px/1.2 var(--sans);
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn.sec { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.sec:hover { background: var(--paper-deep); }
.btn.perigo { background: transparent; color: var(--danger); border-color: var(--line-strong); min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn.perigo:hover { background: var(--danger-soft); border-color: var(--danger-soft); }
.btn.cheio { width: 100%; }
.campo { display: block; margin-top: 14px; }
.campo > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.campo input {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--line-strong); border-radius: var(--raio); transition: border-color .15s, box-shadow .15s;
}
.campo input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.aviso { padding: 10px 12px; border-radius: var(--raio); font-size: 14px; margin: 14px 0 0; }
.aviso.ok { background: var(--sage-soft); color: var(--sage); }
.aviso.erro { background: var(--danger-soft); color: var(--danger); }
.mono { font-family: var(--mono); }

/* ---------- Telas pequenas centralizadas (entrar, gerar hash) ---------- */
.centro { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.centro .cartao { width: min(400px, 100%); padding: 32px 28px; border-top: 4px solid var(--accent); }
.centro .marca { flex: none; margin-bottom: 22px; }
.centro h1 { font-size: 1.5rem; margin: 0 0 4px; }
.centro p.sub { margin: 0 0 6px; color: var(--ink-soft); font-size: 14px; }
.centro .btn.cheio { margin-top: 22px; }