/* A MARCA DO EDITOR DE HUMANO.
 *
 * Marca própria, como o briefing pede — e não a do acervo. O editor aparece embutido em superfícies
 * de cores diferentes (hoje a ficha do acervo; amanhã outra interface da casa), e herdar a cor de
 * quem embute faria a mesma ferramenta ter cara diferente em cada lugar.
 *
 * O escuro não é moda: a superfície principal é uma cena 3D, e um painel claro ao lado de um visor
 * escuro força a pupila a se readaptar a cada ida e volta entre o controle e a peça que ele move.
 * Quem edita faz isso centenas de vezes por sessão.
 */

:root {
  color-scheme: dark;

  /* As superfícies, do fundo para a frente. */
  --fundo: #0f1116;
  --painel: #15171c;
  --painel-alto: #1b1e25;
  --linha: #2a2e37;
  --linha-forte: #343a45;

  /* O texto, em três pesos de atenção. */
  --tinta: #e7e9ee;
  --tinta-media: #9aa3b2;
  --tinta-fraca: #6b7483;

  /* A cor da ação. Um azul-índigo que não é o azul de sistema de ninguém. */
  --acao: #5b7cfa;
  --acao-forte: #7a95ff;
  --acao-fundo: rgba(91, 124, 250, .14);

  /* Os estados semânticos. */
  --bom: #3fa868;
  --bom-fundo: rgba(63, 168, 104, .13);
  --aviso: #d59b3c;
  --aviso-fundo: rgba(213, 155, 60, .13);
  --ruim: #d9534f;
  --ruim-fundo: rgba(217, 83, 79, .13);

  --raio: 9px;
  --raio-g: 13px;
  /* Uma curva só para toda micro-interação, e ela NÃO é linear: a percepção humana de movimento
   * também não é, e `linear` lê como mecânico mesmo quando ninguém sabe dizer por quê. */
  --mola: cubic-bezier(.2, .9, .3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* APPS-GUIDE 8: comportamento de app, não de site. */
  touch-action: pan-y;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* `hidden` PERDE para qualquer `display` declarado por autor — é a armadilha mais comum do
 * atributo, e o sintoma é um painel que nasce aberto e vazio. A regra diz "escondido quer dizer
 * escondido", e não há caso em que se queira o contrário. */
[hidden] { display: none !important; }

/* A scrollbar: fina e nossa. A padrão do sistema é larga, clara e grita que isto é uma página web
 * dentro de um app. */
* { scrollbar-width: thin; scrollbar-color: var(--linha-forte) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--linha-forte); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #475061; background-clip: content-box; }

/* O anel de foco é nosso, nunca o azul do navegador. Offset proporcional para ele não colar na
 * borda do elemento. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── BOTÕES ──────────────────────────────────────────────────────────────────────────────────── */

.bt {
  font: 600 13px/1 inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--painel-alto);
  color: var(--tinta);
  cursor: pointer;
  text-transform: none; letter-spacing: normal;
  transition: background .14s var(--mola), border-color .14s var(--mola), transform .1s var(--mola);
}
@media (hover: hover) and (pointer: fine) {
  .bt:hover { background: #22262f; border-color: #434b5a; }
}
/* O pressionado é tátil: a mão sente que o botão respondeu antes de o resultado chegar. */
.bt:active { transform: scale(.96); }
.bt[disabled] { opacity: .42; cursor: default; transform: none; }
.bt--acao { background: var(--acao); border-color: var(--acao); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .bt--acao:hover { background: var(--acao-forte); border-color: var(--acao-forte); }
}
.bt--fantasma { background: transparent; border-color: transparent; color: var(--tinta-media); }
@media (hover: hover) and (pointer: fine) {
  .bt--fantasma:hover { background: var(--painel-alto); color: var(--tinta); }
}
.bt--pequeno { padding: 6px 10px; font-size: 12px; }

/* O spinner dentro do botão, para ação curta: o botão NÃO desaparece enquanto trabalha. */
.bt .girando {
  width: 13px; height: 13px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: gira .62s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .girando { animation-duration: 2s; }
  .bt:active { transform: none; }
}

/* ── O CHIP DE ESTADO ────────────────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 inherit; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 99px;
  background: var(--painel-alto); color: var(--tinta-media);
  border: 1px solid var(--linha);
}
.chip--bom { background: var(--bom-fundo); color: var(--bom); border-color: transparent; }
.chip--aviso { background: var(--aviso-fundo); color: var(--aviso); border-color: transparent; }
.chip--ruim { background: var(--ruim-fundo); color: var(--ruim); border-color: transparent; }
.chip--acao { background: var(--acao-fundo); color: var(--acao-forte); border-color: transparent; }
.chip .ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ── O TWEAKPANE, VESTIDO ────────────────────────────────────────────────────────────────────── */
/* Ele expõe variáveis de propósito. Vesti-las é o trabalho; reescrever os controles seria desfazer
 * a razão de usá-lo. */
.tp-dfwv { --tp-base-background-color: transparent; }
:root {
  --tp-base-background-color: transparent;
  --tp-base-shadow-color: transparent;
  --tp-button-background-color: #272b34;
  --tp-button-foreground-color: #e7e9ee;
  --tp-container-background-color: rgba(255,255,255,.04);
  --tp-container-foreground-color: #c3cad6;
  --tp-groove-foreground-color: rgba(255,255,255,.08);
  --tp-input-background-color: #11131a;
  --tp-input-foreground-color: #e7e9ee;
  --tp-label-foreground-color: #8d97a6;
  --tp-monitor-background-color: #11131a;
  --tp-monitor-foreground-color: #9aa3b2;
}