/* embeddings — estilos do jogo, da aula e do laboratório (mundo AI Engineer). */

/* ---------- aula ---------- */
/* prefixo .ema- · demos de js/games/embeddings/aula.js (o bloco "rodar no LLM" vem de css/ai.css) */

/* legenda de cores dos mapas */
.ema-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 400 12px/1.3 var(--mono); color: var(--text-2); }
.ema-chip { display: inline-flex; align-items: center; gap: 6px; }
.ema-chip i, .ema-list i { flex: none; width: 10px; height: 10px; border: 1px solid #000; }
.ema-src { margin-left: auto; color: var(--muted); }
.ema-src b, .ema-sum b { font-weight: 500; color: var(--text); }
.ema-src b.good, .ema-sum b.good { color: var(--good); }
.ema-src b.warn, .ema-sum b.warn { color: var(--warn); }
@media (max-width: 520px) { .ema-src { margin-left: 0; flex-basis: 100%; } }

/* canvases em que se clica (mapa das palavras, mapa das frases) */
.ls-demo-body .ls-canvas.ema-canvas { cursor: crosshair; }
.ema-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* parte 1: posicionar a palavra nova */
.ema-place { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.ema-ask { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.ema-ask b { color: var(--accent); font-weight: 500; }
.ema-ask .muted { margin-left: 10px; font: 400 11px/1 var(--mono); }
.ema-msg { margin: 0; padding: 8px 11px; border: 2px solid var(--line-2); background: var(--surface); font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.ema-msg:empty { display: none; }
.ema-msg b { color: var(--text); font-weight: 500; }
.ema-msg.good { border-color: var(--good); background: var(--good-soft); }
.ema-msg.bad { border-color: var(--bad); background: var(--bad-soft); }
.ema-msg.warn { border-color: var(--warn); background: var(--warn-soft); }

/* parte 2: as frases numeradas do mapa */
.ema-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
@media (max-width: 720px) { .ema-list { grid-template-columns: 1fr; } }
.ema-list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 2px solid transparent; font-size: 13px; line-height: 1.35; text-align: left; color: var(--text-2); }
.ema-list button:hover { border-color: var(--line-2); background: var(--surface-2); }
.ema-list button[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.ema-list .mono { flex: none; min-width: 16px; font-size: 11px; color: var(--muted); }
.ema-sum { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ema-sum.muted { color: var(--muted); }
.ema-nums { display: block; padding: 8px 10px; border: 2px dashed var(--line-2); background: var(--bg); font: 400 12px/1.5 var(--mono); color: var(--text-2); overflow-wrap: anywhere; }

/* tabelas (comparação das estratégias, classificação zero-shot) */
.ema-tbl { max-width: 100%; overflow-x: auto; }
.ema-tbl .ls-table { width: 100%; }
.ema-tbl .ls-table th, .ema-tbl .ls-table td { padding: 6px 10px; white-space: nowrap; }
.ema-cmp tr.last td { color: var(--text); background: var(--accent-soft); }
.ema-cmp td:first-child { text-align: left; }

/* parte 5: rótulos, tabela clicável e o porquê */
.ema-labels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ema-labels li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 6px 10px; border: 2px solid var(--line); background: var(--bg); font-size: 13px; line-height: 1.45; color: var(--text-2); }
.ema-labels b { font: 500 12px/1.3 var(--mono); color: var(--accent); }
@media (max-width: 520px) { .ema-labels li { grid-template-columns: 1fr; } }
.ema-cls tr[data-row] { cursor: pointer; }
.ema-cls tr[data-row]:hover td:not(.on) { background: var(--surface-2); }
.ema-cls tr.sel td:not(.on) { background: var(--surface-3); }
.ema-tbl .ema-cls td.ema-txt { min-width: 200px; text-align: left; white-space: normal; }
.ema-txt button { padding: 0; border: 0; background: none; font: 400 13px/1.4 var(--sans); color: var(--text-2); text-align: left; }
.ema-cls tr.sel .ema-txt button, .ema-txt button:hover { color: var(--text); }
.ema-why { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 2px solid var(--line-2); background: var(--bg); }
.ema-why:empty { display: none; }
.ema-why-t { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); }
.ema-why-t::before { content: '“'; color: var(--accent); }
.ema-why-t::after { content: '”'; color: var(--accent); }

/* ---------- jogo ---------- */
/* prefixo .em- · js/games/embeddings/game.js (base das fases em css/games.css: .sg-*) */

.em .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.em .btn kbd { margin-left: 6px; }
@media (hover: none) and (pointer: coarse) { .em kbd { display: none; } }

.em .em-canvas { cursor: crosshair; }
.em .em-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.em .sg-formula .muted { color: var(--muted); }
.em-controls { display: flex; flex-direction: column; gap: 12px; }
.em-controls:empty, .em-msg:empty, .em-over:empty, .em-board:empty { display: none; }
.em-over { display: flex; flex-direction: column; gap: 10px; }
.em-board { display: flex; flex-direction: column; gap: 8px; }
.em-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.em-sub b { color: var(--text); font-weight: 500; }
.em-small { display: block; margin-top: 4px; font: 400 12px/1.5 var(--mono); color: var(--muted); }

/* opções numeradas (cestas da fase 1, vizinhos da fase 2): cor, nome e tecla */
.em-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.em-opt {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; padding: 6px 10px;
  border: 2px solid var(--line-2); background: var(--surface); color: var(--text-2);
  font-size: 13.5px; line-height: 1.3; text-align: left; box-shadow: 2px 2px 0 0 #000;
}
.em-opt i { flex: none; width: 12px; height: 12px; border: 1px solid #000; background: var(--c, var(--muted)); }
.em-opt span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.em-opt small { display: block; font: 400 11px/1.3 var(--mono); color: var(--muted); }
.em-opt kbd { flex: none; }
.em-opt:hover:not(:disabled) { border-color: var(--c, var(--accent)); color: var(--text); }
.em-opt:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.em-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.em-opt:disabled { opacity: 0.55; cursor: default; }
.em-opt.bad { border-color: var(--bad); background: var(--bad-soft); }
.em-opt.ok { border-color: var(--good); background: var(--good-soft); opacity: 1; color: var(--text); }

/* fase 2, conta ao contrário: o que tirar e o que somar */
.em-ops { display: flex; flex-direction: column; gap: 6px; }
.em-ops > div { display: flex; flex-wrap: wrap; gap: 6px; }
.em-chip {
  padding: 5px 10px; border: 2px solid var(--line-2); background: var(--surface); color: var(--text-2);
  font: 400 13px/1.3 var(--mono); box-shadow: 2px 2px 0 0 #000;
}
.em-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.em-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.em-chip[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.em-chip:disabled { opacity: 0.55; cursor: default; }

/* fase 3: as setas, com letra, texto e comprimento */
.em-setas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.em-seta {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%;
  padding: 6px 10px; border: 2px solid var(--line); background: var(--surface); color: var(--text-2);
  font-size: 13px; line-height: 1.35; text-align: left;
}
.em-seta b { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--c, var(--accent)); color: var(--c, var(--accent)); font: 500 12px/1 var(--mono); }
.em-seta em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.em-seta:hover:not(:disabled) { border-color: var(--line-3); color: var(--text); }
.em-seta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.em-seta[aria-pressed='true'] { border-color: var(--c, var(--accent)); background: var(--surface-2); color: var(--text); }
.em-seta[aria-pressed='true'] b { background: var(--c, var(--accent)); color: var(--accent-ink); }
.em-seta:disabled { cursor: default; }

/* fase 4: o lote (lugares fixos) e a fila de textos */
.em-tray { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.em-slot {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 4px 6px;
  border: 2px dashed var(--line-2); background: var(--bg); color: var(--faint);
  font: 400 12px/1.25 var(--mono); text-align: center; overflow-wrap: anywhere;
}
.em-slot.on { justify-content: flex-start; border-style: solid; border-color: var(--c, var(--accent)); background: var(--surface); color: var(--text); text-align: left; box-shadow: 2px 2px 0 0 #000; }
.em-slot i, .em-fi i { flex: none; width: 10px; height: 10px; border: 1px solid #000; background: var(--c, var(--muted)); }
.em-slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.em-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.em-fi {
  display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 34px; padding: 4px 8px;
  border: 2px solid var(--line); background: var(--surface); color: var(--text-2);
  font-size: 13px; line-height: 1.3; text-align: left;
}
.em-fi span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.em-fi small { flex: none; font: 400 10.5px/1.2 var(--mono); color: var(--warn); }
.em-fi .icon { flex: none; width: 12px; height: 12px; color: var(--good); }
.em-fi:hover:not(:disabled) { border-color: var(--line-3); color: var(--text); }
.em-fi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.em-fi.on { border-color: var(--text); background: var(--surface-2); color: var(--text); }
.em-fi.has { color: var(--muted); }
.em-fi.rep { border-style: dashed; border-color: var(--warn); }
.em-fi:disabled { cursor: default; }

/* fase 5: medidor da variância no eixo (a marca é a meta, no Fácil) */
.em-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; }
.em-meter .sg-label { grid-column: 1 / -1; }
.em-bar { position: relative; display: block; height: 14px; border: 2px solid var(--line-2); background: var(--bg); }
.em-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width 0.1s linear; }
.em-bar i.ok { background: var(--good); }
.em-bar b { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--warn); }
.em-meter output { min-width: 92px; font-size: 12.5px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
  .em-pick { grid-template-columns: 1fr; }
  .em-tray { grid-template-columns: 1fr; }
  .em-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .em-bar i { transition: none; } }