/* =========================================================
   Série didática   componentes compartilhados

   Camada 2 de 3. A ordem de carregamento é sempre:
     styles.css  →  llm.css  →  didatica.css  →  <pagina>.css

   llm.css tem o vocabulário visual (.llm-*). Aqui moram os
   componentes que nasceram na página de embeddings e acabaram
   sendo de todo mundo: blocos de código com abas, chips
   selecionáveis, rankings, tabelas, fluxos verticais.

   Sobre o prefixo .emb-: é histórico. Esses seletores já estão
   escritos em embeddings.html e no dicionário mental de quem
   mexe no site   renomear custaria uma varredura em todas as
   páginas e não compra nada. Componentes NOVOS usam .dd-.
   ========================================================= */

/* =========================
   Blocos de código com abas
   ========================= */

/* o reset global pinta tudo de --bg; dentro dos blocos escuros
   precisamos devolver a cor clara com especificidade > :where() */
.emb-code,
.emb-code * {
  background: transparent;
}

.emb-code {
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

.emb-code__head {
  display: flex;
  align-items: center;
  gap: calc(var(--sm) / 1.6);
  padding: calc(var(--sm) / 1.4) var(--sm);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .035);
}

.emb-code__tab {
  padding: calc(var(--sm) / 2.4) calc(var(--sm) / 1.2);
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: rgba(255, 255, 255, .48);
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.06);
  line-height: 1.2;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.emb-code__tab:hover { color: rgba(255, 255, 255, .82); }

.emb-code__tab.is-on {
  border-color: rgba(63, 185, 80, .55);
  background: rgba(63, 185, 80, .14);
  color: var(--prompt-green);
  font-weight: 700;
}

.emb-code__note {
  margin-left: auto;
  color: rgba(255, 255, 255, .34);
  font-size: calc(var(--sm) / 1.14);
  white-space: nowrap;
}

.emb-code__pane { display: none; }
.emb-code__pane.is-on { display: block; }

.emb-code pre {
  margin: 0;
  padding: var(--md);
  overflow-x: auto;
}

.emb-code code,
.emb-code pre {
  color: #d9dee8;
  font-family: var(--font-mono);
  font-size: calc(var(--md) / 1.18);
  line-height: 1.62;
  white-space: pre;
  tab-size: 2;
}

/* tokens de sintaxe, marcados à mão no HTML */
.emb-code .k { color: #c4a4ff; }   /* keyword    */
.emb-code .s { color: #8ee6a1; }   /* string     */
.emb-code .n { color: #ffc46b; }   /* número     */
.emb-code .f { color: #79b8ff; }   /* função     */
.emb-code .c { color: rgba(255, 255, 255, .38); font-style: italic; }

/* =========================
   Chips selecionáveis
   ========================= */
.emb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.5);
}

.emb-chip {
  padding: calc(var(--sm) / 1.7) calc(var(--sm) / 1.05);
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: #fff;
  font-size: calc(var(--md) / 1.06);
  line-height: 1.2;
  transition: border-color .22s ease, background .22s ease, color .22s ease, transform .22s ease;
}

.emb-chip:hover { border-color: var(--ink-45); transform: translateY(-2px); }

.emb-chip.is-a {
  border-color: var(--c-blue);
  background: rgba(47, 111, 237, .12);
  color: var(--c-blue);
  font-weight: 700;
}

.emb-chip.is-b {
  border-color: var(--c-amber);
  background: rgba(167, 106, 0, .14);
  color: var(--c-amber);
  font-weight: 700;
}

.emb-chip.is-on {
  border-color: var(--prompt-green);
  background: rgba(63, 185, 80, .12);
  color: var(--c-green);
  font-weight: 700;
}

/* =========================
   Grade de termos (parcelas de uma soma)
   ========================= */
.emb-terms {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--sm) / 1.4);
}

.emb-term {
  padding: calc(var(--sm) / 1.5);
  border: 1px solid var(--hair-soft);
  border-radius: 9px;
  background: rgba(14, 16, 22, .025);
  text-align: center;
  font-size: calc(var(--sm) / 1.02);
  line-height: 1.5;
}

.emb-term b { display: block; font-size: calc(var(--md) / 1.08); }
.emb-term.is-pos b { color: var(--c-green); }
.emb-term.is-neg b { color: var(--c-pink); }
.emb-term small { color: var(--ink-45); }

/* =========================
   Ranking (linha + barra + score)
   ========================= */
.emb-rank {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm) / 1.6);
}

.emb-rank__row {
  display: flex;
  align-items: center;
  gap: calc(var(--sm) / 1.2);
  padding: calc(var(--sm) / 1.5) calc(var(--sm) / 1.1);
  border: 1px solid var(--hair-soft);
  border-radius: 10px;
  background: #fff;
  transition: border-color .25s ease, background .25s ease, opacity .25s ease;
}

.emb-rank__row.is-top {
  border-color: var(--prompt-green);
  background: rgba(63, 185, 80, .06);
}

.emb-rank__row.is-out { opacity: .42; }

.emb-rank__n {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(14, 16, 22, .06);
  color: var(--ink-45);
  font-size: calc(var(--sm) / 1.14);
  font-weight: 700;
}

.emb-rank__row.is-top .emb-rank__n { background: var(--prompt-green); color: #fff; }

.emb-rank__word {
  flex: 0 0 auto;
  width: 108px;
  font-size: calc(var(--md) / 1.06);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emb-rank__word--wide { width: 168px; }

.emb-rank__bar {
  flex: 1;
  height: 8px;
  border-radius: 5px;
  background: rgba(14, 16, 22, .06);
  overflow: hidden;
}

/* sem transição: os rankings são remontados por innerHTML a cada interação,
   e as linhas ainda trocam de ordem   animar largura aqui não teria efeito */
.emb-rank__bar i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--c, var(--c-green));
}

.emb-rank__score {
  flex: 0 0 auto;
  width: 48px;
  font-size: calc(var(--sm) / 1.02);
  color: var(--ink-45);
  text-align: right;
}

.emb-rank__flag {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(209, 67, 107, .12);
  color: var(--c-pink);
  font-size: calc(var(--sm) / 1.2);
}

/* =========================
   Fluxo vertical com etapas
   ========================= */
.emb-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.emb-flow__row {
  display: flex;
  gap: var(--md);
}

.emb-flow__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.emb-flow__dot {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--c);
  background: color-mix(in srgb, var(--c) 10%, #fff);
  color: var(--c);
}

.emb-flow__dot svg { display: block; width: 15px; height: 15px; }

.emb-flow__line {
  width: 1px;
  flex: 1;
  min-height: 14px;
  background: var(--hair);
}

.emb-flow__body { padding-bottom: var(--md); }

.emb-flow__title {
  font-size: calc(var(--md) * 1.02);
  font-weight: 700;
  margin-bottom: 2px;
}

.emb-flow__phase {
  display: inline-block;
  margin-left: calc(var(--sm) / 1.6);
  padding: 1px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: var(--c);
  font-size: calc(var(--sm) / 1.22);
  font-weight: 400;
  vertical-align: 2px;
}

/* =========================
   Tabela compacta de números
   ========================= */
.emb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(var(--md) / 1.14);
}

.emb-table th,
.emb-table td {
  padding: calc(var(--sm) / 1.5) calc(var(--sm) / 1.3);
  border-bottom: 1px solid var(--hair-soft);
  text-align: left;
  background: transparent;
}

.emb-table th {
  color: var(--ink-45);
  font-weight: 400;
  font-size: calc(var(--sm) / 1.06);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.emb-table td { color: var(--ink-80); }
.emb-table td b { color: var(--bg); }
.emb-table tr:last-child td { border-bottom: 0; }
.emb-table__num { text-align: right; font-variant-numeric: tabular-nums; }

.emb-scroll { overflow-x: auto; }

/* =========================
   Mapa 2D   extensões do .llm-scatter
   ========================= */
.llm-scatter--tall { height: 300px; }

.llm-scatter__pt.is-query .llm-scatter__dot {
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 24%, transparent);
}

.llm-scatter__pt.is-query .llm-scatter__txt { font-weight: 700; }

/* rótulo à esquerda do ponto quando ele está perto da borda direita */
.llm-scatter__pt.is-left { flex-direction: row-reverse; }

/* desempilhamento vertical do texto quando dois rótulos coincidem;
   o ponto em si nunca sai da posição real que a projeção calculou */
.llm-scatter__txt { transform: translateY(var(--lbl, 0)); }

/* pontos distantes viram só bolinha: com muitos rótulos numa projeção 2D
   real eles se sobrepõem. O rótulo volta no hover. */
.llm-scatter__pt.is-far .llm-scatter__dot { opacity: .5; }

.llm-scatter__pt.is-far .llm-scatter__txt {
  opacity: 0;
  transition: opacity .2s ease;
}

.llm-scatter__pt.is-far:hover { z-index: 2; }
.llm-scatter__pt.is-far:hover .llm-scatter__txt { opacity: .85; }

.emb-axis {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--sm) / 1.6);
  font-size: calc(var(--sm) / 1.1);
  color: var(--ink-45);
}

/* =========================================================
   Componentes novos (.dd-)
   ========================================================= */

/* =========================
   Calculadora: linhas de slider + leitura
   ========================= */
.dd-calc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md);
}

.dd-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px calc(var(--sm) / 1.4);
  align-items: baseline;
}

.dd-slider__label {
  font-size: calc(var(--md) / 1.12);
  color: var(--ink-60);
}

.dd-slider__value {
  font-family: var(--font-mono);
  font-size: calc(var(--md) / 1.06);
  font-weight: 700;
  color: var(--c, var(--c-blue));
  font-variant-numeric: tabular-nums;
}

.dd-slider .llm-range { grid-column: 1 / -1; }

.dd-slider__hint {
  grid-column: 1 / -1;
  font-size: calc(var(--sm) / 1.14);
  color: var(--ink-45);
}

/* =========================
   Pilha de camadas empilhadas
   ========================= */
.dd-stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm) / 2);
}

.dd-stack__row {
  display: flex;
  align-items: center;
  gap: calc(var(--sm) / 1.3);
  padding: calc(var(--sm) / 1.5) var(--sm);
  border: 1px solid var(--c, var(--hair));
  border-left-width: 3px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c, #fff) 6%, #fff);
  transition: background .2s ease, transform .2s ease;
}

.dd-stack__row.is-repeat {
  border-style: dashed;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--c, #fff) 5%, #fff) 0 8px,
    transparent 8px 16px
  );
}

.dd-stack__name {
  flex: 1;
  font-size: calc(var(--md) / 1.06);
  font-weight: 700;
  color: var(--c, var(--bg));
}

.dd-stack__shape {
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.06);
  color: var(--ink-45);
  white-space: nowrap;
}

.dd-stack__n {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--c-blue)) 14%, #fff);
  color: var(--c, var(--c-blue));
  font-size: calc(var(--sm) / 1.14);
  font-weight: 700;
}

/* =========================
   Barra empilhada (composição de um total)
   ========================= */
.dd-split {
  display: flex;
  width: 100%;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(14, 16, 22, .06);
}

.dd-split__seg {
  display: grid;
  place-items: center;
  background: var(--c, var(--c-blue));
  color: #fff;
  font-size: calc(var(--sm) / 1.2);
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  transition: width .3s ease;
}

.dd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.2) var(--md);
  margin-top: calc(var(--sm) / 1.3);
  font-size: calc(var(--sm) / 1.06);
  color: var(--ink-60);
}

.dd-legend span {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--sm) / 2.4);
}

.dd-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c, var(--c-blue));
}

/* =========================
   Etiqueta de destaque inline
   ========================= */
.dd-pill {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid color-mix(in srgb, var(--c, var(--c-blue)) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--c-blue)) 10%, #fff);
  color: var(--c, var(--c-blue));
  font-size: calc(var(--sm) / 1.14);
  font-weight: 700;
  white-space: nowrap;
}

/* =========================
   Responsivo
   ========================= */
@media (max-width: 900px) {
  .emb-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd-calc { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .emb-rank__word { width: 86px; }
  .emb-rank__word--wide { width: 110px; }
  .emb-code code, .emb-code pre { font-size: calc(var(--md) / 1.3); }
  .dd-stack__shape { display: none; }
}