/* =========================================================
   IA local   componentes só desta página

   Camada 3 de 3: styles.css → llm.css → didatica.css → aqui.
   O corpus impresso, os tokens marcados por tipo de acerto, a
   grade de especialistas e o gráfico de duas barras por linha.
   ========================================================= */

/* =========================
   Leituras e vereditos
   (mesmo desenho do .rlm-*, que já provou aguentar 320 px)
   ========================= */
.loc-stats {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.4);
  margin-top: var(--md);
}

.loc-stats .dd-pill { white-space: normal; }

.loc-verdict {
  margin-top: var(--md);
  font-size: calc(var(--md) / 1.02);
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink-80);
}

.loc-verdict.is-bad { color: var(--c-pink); }

.loc-cliff {
  margin-top: calc(var(--sm) / 1.2);
  padding-top: calc(var(--sm) / 1.4);
  border-top: 1px dashed var(--c-pink);
  font-size: calc(var(--sm) / 1.02);
  color: var(--c-pink);
}

/* =========================
   Corpus do livro de frases

   Texto corrido, não código: quebra em telas estreitas em vez
   de rolar, porque o visitante precisa lê-lo inteiro para
   confiar na contagem de n-gramas ao lado.
   ========================= */
.loc-corpus {
  margin: var(--md) 0 0;
  padding: var(--md);
  border: 1px solid var(--hair-soft);
  border-radius: 10px;
  background: rgba(14, 16, 22, .025);
  color: var(--ink-80);
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.02);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}

/* =========================
   Tokens marcados pela consulta
   ========================= */
.loc-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 2.2);
  margin-top: var(--md);
}

.loc-tok {
  padding: 2px 9px;
  border: 1px solid var(--c, var(--hair));
  border-radius: 7px;
  background: color-mix(in srgb, var(--c, #fff) 10%, #fff);
  color: var(--c, var(--ink-80));
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.06);
  line-height: 1.7;
}

.loc-tok.is-tri { --c: var(--c-green); font-weight: 700; }
.loc-tok.is-bi { --c: var(--c-amber); }
.loc-tok.is-miss { --c: var(--c-pink); border-style: dashed; }

/* =========================
   Grade de especialistas

   512 células numa grade fluida: cada uma é um especialista, e
   acende quando o roteamento a escolheu ao menos uma vez.
   ========================= */
.loc-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));
  gap: 3px;
  margin-top: var(--md);
}

.loc-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(14, 16, 22, .07);
  transition: background .3s ease;
}

.loc-cell.is-on { background: color-mix(in srgb, var(--c-purple) calc(var(--o, 1) * 100%), rgba(14, 16, 22, .07)); }

/* =========================
   Gráfico de duas barras por linha
   ========================= */
.loc-chart {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm) / 1.6);
  margin-top: var(--md);
}

.loc-row {
  display: flex;
  align-items: center;
  gap: var(--sm);
}

.loc-row__cap {
  flex: 0 0 auto;
  width: 58px;
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.06);
  font-variant-numeric: tabular-nums;
  color: var(--ink-45);
  text-align: right;
}

.loc-row__bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* a escala do gráfico alinha com as barras, não com a coluna de rótulo */
.loc-chart + .llm-scale { padding-left: 66px; padding-right: 50px; }

/* dentro do gráfico as barras não têm rótulo próprio: quem nomeia
   é a legenda de cores acima, e o número fica na ponta */
.loc-row__bars .llm-bar { gap: calc(var(--sm) / 1.6); }
.loc-row__bars .llm-bar__track { height: 12px; }
.loc-row__bars .llm-bar__value { width: 42px; text-align: right; }

/* =========================
   Responsivo
   ========================= */
@media (max-width: 640px) {
  .loc-cells { grid-template-columns: repeat(auto-fill, minmax(8px, 1fr)); gap: 2px; }
  .loc-row__cap { width: 46px; }
  .loc-corpus { font-size: calc(var(--sm) / 1.14); }
}