/* ==========================================================================
   EvoluAI — Nível 02 · Descendo a Montanha (prefixo gd-) · tema pixel
   Os gráficos são limpos (epoch/js/chart.js, canvas em alta resolução) e só o
   caminhante é pixel art. Aqui o acabamento: cantos retos, bordas de 2px,
   sombras duras.
   ========================================================================== */

.gd { --gd-hard: 3px 3px 0 0 rgba(0, 0, 0, 0.5); }

/* ---------- canvas e mini-gráficos ---------- */

.gd .sg-canvas,
.gd-mini {
  border-radius: 0;
  background: #0c0b10;
  box-shadow: var(--gd-hard);
  /* nada aqui é arrastável: o dedo que começa no gráfico ainda rola a página */
  touch-action: pan-y;
}
/* dois mini-gráficos lado a lado (η e perda por passo; a feira e o MSE por época) */
.gd-minis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.gd-minis[hidden] { display: none; }
.gd-mini { display: block; width: 100%; height: 150px; border: 1px solid var(--line); }

/* ---------- leitura sob o gráfico: chips de HUD (números em Geist Mono, como os gráficos) ---------- */

.gd .sg-caption { justify-content: flex-start; gap: 6px; font: 400 11.5px/1.3 var(--mono); color: var(--muted); }
.gd .sg-caption 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;
}
.gd .sg-caption span:first-child { color: var(--text-2); border-style: dashed; }
.gd .sg-caption b { font-weight: 500; color: var(--accent); }

/* ---------- controles ---------- */

.gd-controls { display: flex; flex-direction: column; gap: 14px; }
.gd-msg:empty { display: none; }
.gd .sg-formula { border-color: var(--line-2); background: var(--bg); box-shadow: var(--gd-hard); }
.gd .sg-formula sub, .gd .sg-formula sup { font-size: 0.75em; line-height: 0; }
.gd .sg-formula .muted b { color: var(--text-2); }
.gd .sg-formula .muted b.neg { color: var(--bad); }
.gd .sg-slider > .mono { font-family: var(--pixel); font-size: 15px; color: var(--accent); }
.gd .sg-slider output { font-family: var(--pixel-ui); font-size: 11px; }
.gd .sg-stats div { border-width: 2px; border-color: var(--line-2); background: var(--bg-2); box-shadow: var(--gd-hard); }
.gd .sg-chip-toggle { background: var(--surface-2); box-shadow: 2px 2px 0 0 #000; }
.gd .sg-chip-toggle[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); border-color: #000; }
.gd .sg-chip-toggle:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.gd .sg-chip-toggle:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- celular: o que se mexe fica logo abaixo do gráfico ----------
   As duas colunas viram uma pilha só: título e objetivo, gráfico, legenda,
   controles, mini-gráfico (η por passo reage aos sliders logo acima) e mensagem. */

@media (max-width: 920px) {
  .gd .sg-body { display: flex; flex-direction: column; gap: 12px; }
  .gd .sg-main, .gd .sg-ctrl { display: contents; }
  .gd .sg-head { order: 0; }
  .gd .sg-goal { order: 1; }
  .gd .sg-canvas { order: 2; }
  .gd .sg-caption { order: 3; }
  .gd-controls { order: 4; }
  .gd-minis { order: 5; }
  .gd-msg { order: 6; }
  .gd .sg-actions { order: 7; }
}

@media (max-width: 640px) {
  .gd .sg-canvas { height: 260px; }
  .gd-mini { height: 124px; }
  .gd .sg-caption { font-size: 11px; gap: 4px; }
  .gd .sg-caption span { padding: 3px 6px; white-space: normal; }
}