/* ==========================================================================
   EvoluAI — ML Basics · mlb-03 A Reta que Prevê (prefixo mrt-) · tema pixel
   O gráfico da sorveteria e o painel de baixo (carrinho, resíduos, curva do
   MSE, régua do R²) são canvases limpos em alta resolução (epoch/js/chart.js),
   com o toldo, os picolés e o pinguim em pixel art por cima; fórmula, números
   e botões ficam no DOM, com cantos retos, bordas de 2 px e sombras duras.
   Abas, sliders e mensagens vêm do kit (sg-).
   ========================================================================== */

.mrt { --mrt-hard: 3px 3px 0 0 rgba(0, 0, 0, 0.5); max-width: 1180px; }
/* a Pixelify Sans desenha a ligadura "fi" como um A: desligue as ligaduras */
.mrt { font-variant-ligatures: none; }

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

.mrt .sg-canvas,
.mrt canvas.mrt-mini {
  display: block;
  width: 100%;
  border-radius: 0;
  border: 2px solid var(--line-2);
  background: #0c0b10;
  box-shadow: var(--mrt-hard);
}
/* os picolés e a reta se arrastam com o dedo: o gesto não rola a página */
.mrt .sg-canvas { height: 380px; touch-action: none; cursor: grab; }
.mrt .sg-canvas:active { cursor: grabbing; }
/* fase do festival: só toques, a página pode rolar */
.mrt .sg-canvas.pick { touch-action: manipulation; cursor: pointer; }
.mrt .sg-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mrt canvas.mrt-mini { height: 150px; touch-action: pan-y; }
.mrt canvas.mrt-mini[hidden] { display: none; }

/* ---------- leitura sob o gráfico: chips de HUD ---------- */

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

.mrt-keys { margin: 0; font: 400 10px/1.5 var(--pixel-ui); color: var(--faint); }

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

.mrt-controls { display: flex; flex-direction: column; gap: 14px; }
.mrt-msg:empty { display: none; }
.mrt .sg-formula { border: 2px solid var(--line-2); border-radius: 0; background: var(--bg); box-shadow: var(--mrt-hard); }
.mrt .sg-formula sub, .mrt .sg-formula sup { font-size: 0.75em; line-height: 0; }
.mrt .sg-formula .muted { color: var(--muted); font-size: 11.5px; }
.mrt .sg-slider > .mono { font-family: var(--pixel); font-size: 15px; color: var(--accent); }
.mrt .sg-slider output { font-family: var(--pixel-ui); font-size: 11px; }
.mrt .sg-stats div { border-radius: 0; border-width: 2px; border-color: var(--line-2); background: var(--bg-2); box-shadow: var(--mrt-hard); }
.mrt .sg-stats dd { font-size: 16px; overflow-wrap: anywhere; }
.mrt .sg-pips i { border-radius: 0; }
.mrt .btn kbd { margin-left: 6px; }

/* metas com várias marcas (R² e extrapolação) */
.mrt-checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mrt-checks li {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 11px;
  border: 2px dashed var(--line-2);
  background: var(--bg-2);
  font-size: 13px; line-height: 1.45; color: var(--text-2);
}
.mrt-checks li .icon { flex: none; margin-top: 2px; color: var(--faint); }
.mrt-checks li.ok { border-style: solid; border-color: rgba(127, 216, 150, 0.45); background: var(--good-soft); color: var(--text); }
.mrt-checks li.ok .icon { color: var(--good); }

/* inspetor de um dia (resíduos e festival): ‹ dia › */
.mrt-insp { display: flex; flex-direction: column; gap: 10px; }
.mrt-insp-nav {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 8px;
  padding: 6px;
  border: 2px solid var(--line-2);
  background: var(--bg);
  box-shadow: var(--mrt-hard);
}
.mrt .mrt-nav { --h: 44px; width: 44px; padding: 0; justify-content: center; }
.mrt-insp-txt { min-height: 3em; margin: 0; font: 400 12px/1.5 var(--mono); color: var(--text-2); }
.mrt-insp-txt b { color: var(--text); font-weight: 500; }
.mrt-insp-txt .pos { color: var(--good); }
.mrt-insp-txt .neg { color: #ff8c2e; }
.mrt-insp-txt .muted { color: var(--muted); }

/* ---------- 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, painel de baixo e mensagem. */

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

@media (max-width: 640px) {
  .mrt .sg-canvas { height: 300px; }
  .mrt canvas.mrt-mini { height: 128px; }
  .mrt .sg-caption { font-size: 10px; gap: 4px; }
  .mrt .sg-caption span { padding: 3px 6px; white-space: normal; }
  .mrt .sg-stats { gap: 8px; }
  .mrt .sg-stats div { padding: 8px 9px; }
  .mrt .sg-stats dd { font-size: 14px; }
  .mrt-checks li { font-size: 12.5px; padding: 7px 9px; }
}

/* ---------- aula (js/games/mlb-reta/aula.js) ---------- */

/* tabelas da aula (a conta dos mínimos quadrados, a extrapolação): se não couberem, rolam de lado */
.mrt-ls-scroll { max-width: 100%; overflow-x: auto; }
/* linha das somas da conta à mão */
.mrt-ls-tot td { color: var(--text); background: var(--surface); }