/* ==========================================================================
   EvoluAI — Nível 03 · Portas Lógicas e o XOR (prefixo pc-) · tema pixel
   O plano, o espaço oculto, a rede e os erros por época são gráficos limpos
   (epoch/js/chart.js); legenda, tabela e controles ficam no DOM, com cantos
   retos e sombras duras. Abas, sliders e mensagens vêm do kit (sg-).
   ========================================================================== */

.pc { --pc-hard: 3px 3px 0 0 rgba(0, 0, 0, 0.5); max-width: 1120px; }

/* ---------- layout: plano à esquerda, controles à direita ---------- */

.pc-body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; padding: 22px; align-items: start; }
.pc-col, .pc-head, .pc-tune, .pc-rest { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pc-head { gap: 12px; }
.pc-tune { gap: 12px; }
.pc-main { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }

/* no celular: título → plano → sliders → legenda → espaço oculto/rede → tabela
   (o que se mexe fica perto do efeito; a legenda desce para não separar os dois) */
@media (max-width: 920px) {
  .pc-body { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .pc-col, .pc-main { display: contents; }
  .pc-head { order: 1; }
  .pc .pc-plane, .pc .pc-hud { order: 2; align-self: center; }
  .pc-tune { order: 3; }
  .pc-legend { order: 4; justify-content: center; }
  .pc-aux { order: 5; }
  .pc-rest { order: 6; }
}

/* ---------- canvases ---------- */

.pc canvas.pc-plane, .pc canvas.pc-hid, .pc canvas.pc-net, .pc canvas.pc-errs { display: block; }
.pc canvas.pc-plane { width: 100%; max-width: 480px; height: auto; aspect-ratio: 1 / 1; }
.pc canvas.pc-hid { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1 / 1; }
.pc canvas.pc-net { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line); }
.pc canvas.pc-errs { width: 100%; height: 88px; border: 1px solid var(--line); }

/* ---------- leitura sob o plano: chips de HUD ---------- */

.pc .pc-hud { justify-content: center; gap: 6px; font: 400 11px/1.3 var(--pixel-ui); color: var(--muted); }
.pc .pc-hud span { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 8px; border: 2px solid var(--line-2); background: var(--bg-2); white-space: nowrap; }
.pc .pc-hud b { font-weight: 400; color: var(--accent); }

/* ---------- legenda (mesmos desenhos do canvas) ---------- */

.pc-legend { gap: 6px 16px; font: 400 11px/1.2 var(--mono); color: var(--text-2); }
.pc-legend span { gap: 7px; white-space: nowrap; }
/* pontos redondos como no gráfico (o tema pixel zera todos os border-radius com !important) */
.pc-legend .pt { box-sizing: border-box; width: 12px; height: 12px; border-radius: 50% !important; }
.pc-legend .pt.one { background: var(--accent); border: 0; }
.pc-legend .pt.zero { border: 2.5px solid var(--text-2); }
.pc-legend .pt.miss { width: 14px; height: 14px; border: 2px dashed var(--bad); }
.pc-legend .zone {
  display: inline-block; width: 18px; height: 12px; border-radius: 2px !important;
  background: rgba(200, 245, 60, 0.16);
  box-shadow: inset 0 0 0 1px rgba(200, 245, 60, 0.3);
}
.pc-legend .ln { display: inline-block; width: 18px; height: 3px; border-radius: 2px !important; }
.pc-legend .ln.sky { background: #7ad7ff; }
.pc-legend .ln.orange { background: #ff8c2e; }

/* ---------- fórmula, sliders e treino ---------- */

.pc .sg-formula { border-color: var(--line-2); background: var(--bg); box-shadow: var(--pc-hard); }
.pc .sg-slider > .mono { font-family: var(--pixel); font-size: 15px; color: var(--accent); }
.pc .sg-slider output { font-family: var(--pixel-ui); font-size: 11px; }

.pc-train { align-items: center; }
.pc-step { min-height: 2.9em; margin: 0; font: 400 12px/1.45 var(--mono); color: var(--text-2); }
.pc-step b { color: var(--text); font-weight: 500; }

/* fase 05: cada linha da fórmula é um neurônio que se pode escolher */
.pc-fxs { display: flex; flex-direction: column; gap: 6px; }
.pc-fx {
  --c: var(--accent);
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 11px;
  border: 2px solid var(--line-2); background: var(--bg);
  font: 400 12px/1.4 var(--mono); color: var(--text-2); text-align: left;
  cursor: pointer;
}
.pc-fx.sky { --c: #7ad7ff; }
.pc-fx.orange { --c: #ff8c2e; }
.pc-fx i { flex: none; width: 10px; height: 10px; background: var(--c); }
.pc-fx b { font-weight: 500; color: var(--text); }
.pc-fx:hover { border-color: var(--line-3, var(--line-2)); }
.pc-fx[aria-pressed='true'] { border-color: var(--c); color: var(--text); box-shadow: var(--pc-hard); }
.pc-fx[aria-pressed='true'] b { color: var(--c); }
.pc-fx:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.pc-who { margin: 2px 0 0; }
.pc-who b { color: var(--text); font-weight: 500; }

.pc-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pc-copy .sg-label { margin-right: 4px; }

/* ---------- espaço oculto e rede (fase 05) ---------- */

/* AND e OR não têm treino: sem erros por época, o bloco some e não ocupa o espaçamento */
.pc-aux[data-kind='plain'] { display: none; }
.pc-aux[data-kind='mlp'] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
@media (max-width: 640px) { .pc-aux[data-kind='mlp'] { grid-template-columns: 1fr; } }
.pc-fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.pc-cap { font-size: 12.5px; line-height: 1.5; color: var(--text-2); text-align: center; }
.pc-cap b { font-weight: 500; }
.pc-cap .good { color: var(--good); }
.pc-cap .bad { color: var(--bad); }
.pc-exs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.pc-ex {
  padding: 4px 8px;
  border: 2px solid var(--line-2); background: var(--bg-2);
  font: 400 11px/1.2 var(--pixel-ui); color: var(--text-2);
  cursor: pointer;
}
.pc-ex[aria-pressed='true'] { background: var(--accent); border-color: #000; color: var(--accent-ink); box-shadow: 2px 2px 0 0 #000; }

/* ---------- tabela-verdade ---------- */

.pc-table { border: 2px solid var(--line-2); background: var(--bg-2); box-shadow: var(--pc-hard); }
.pc-table th { padding: 7px 6px; border-bottom: 2px solid var(--line-2); font: 400 9px/1 var(--pixel-ui); }
.pc-table th.sky { color: #7ad7ff; }
.pc-table th.orange { color: #ff8c2e; }
.pc-table td { padding: 6px; border-bottom: 2px solid var(--line); font: 400 11px var(--pixel-ui); }
.pc-table td.mono { font-family: var(--pixel-ui); }
.pc-table td b { font-weight: 400; color: var(--text); }
.pc-table tr:last-child td { border-bottom: 0; }
.pc-table td .icon { stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter; }
.pc-table tr.no td { background: rgba(255, 97, 89, 0.07); }
.pc-table tr.no td:last-child { animation: pc-blink 0.9s steps(2) infinite; }
/* exemplo que a regra acabou de olhar (treino) ou que percorre a rede (fase 05) */
.pc-table tr.on td, .pc-table tr.sel td { background: rgba(255, 255, 255, 0.07); }
.pc-table tr.on td:first-child, .pc-table tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--text); }
.pc-table.pick tbody tr { cursor: pointer; }
.pc-table.pick tbody tr:hover td { background: rgba(255, 255, 255, 0.05); }
@keyframes pc-blink { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .pc-table tr.no td:last-child { animation: none; } }

/* ---------- mensagens ---------- */

.pc .pc-py {
  display: block; margin-top: 8px; padding: 8px 10px;
  border: 2px solid var(--line-2); background: var(--bg);
  font: 400 11.5px/1.55 var(--mono); color: var(--text);
  white-space: pre; overflow-x: auto;
}
.pc-over { display: flex; flex-direction: column; gap: 10px; }

.pc .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;
}

@media (max-width: 640px) {
  .pc-legend { font-size: 10.5px; gap: 6px 12px; }
  .pc-table th, .pc-table td { padding: 6px 4px; }
  .pc-fx { font-size: 11px; padding: 6px 8px; gap: 8px; }
  .pc-fxs { gap: 4px; }
  .pc .pc-hud { font-size: 10px; gap: 4px; }
  .pc .pc-hud span { padding: 3px 6px; }
}