/* =========================================================
   Anatomia de um modelo   componentes só desta página

   Camada 3 de 3: styles.css → llm.css → didatica.css → aqui.
   A calculadora usa .dd-slider / .dd-split / .dd-stack, que
   moram em didatica.css. Aqui fica o cabeçalho JSON, a tabela
   de tensores e as leituras grandes.
   ========================================================= */

/* =========================
   Cabeçalho do .safetensors
   ========================= */
.ana-json,
.ana-json * {
  background: transparent;
}

.ana-json {
  margin: 0;
  padding: var(--md);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--bg);
  color: #8ee6a1;
  font-family: var(--font-mono);
  font-size: calc(var(--md) / 1.24);
  line-height: 1.55;
  white-space: pre;
  overflow-x: auto;
  tab-size: 2;
}

/* =========================
   Lista de tensores
   ========================= */
.ana-tensors code {
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.02);
  background: transparent;
  color: inherit;
  padding: 0;
}

.ana-tensors td:first-child {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================
   Leitura grande (o total)
   ========================= */
.ana-big {
  font-family: var(--font-mono);
  font-size: calc(var(--lg) / 1.1);
  font-weight: 700;
  line-height: 1;
  color: var(--bg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =========================
   Toggles de arquitetura
   ========================= */
.ana-arch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md);
  margin-top: var(--md);
  padding-top: var(--md);
  border-top: 1px solid var(--hair-soft);
}

.ana-arch .llm-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.6);
}

/* valores derivados da configuração, não editáveis */
.ana-derived {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: var(--md);
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.02);
  color: var(--ink-45);
}

/* =========================
   Responsivo
   ========================= */
@media (max-width: 640px) {
  .ana-tensors td:first-child { max-width: 190px; }
  .ana-json { font-size: calc(var(--md) / 1.4); }
  .ana-big { font-size: var(--md); }
}