/* =========================================================
   RLM   componentes só desta página

   Camada 3 de 3: styles.css → llm.css → didatica.css → aqui.
   O diagrama da arquitetura (o rlm.png do artigo, refeito em
   HTML), o REPL, os comandos e as leituras das etapas.
   ========================================================= */

/* =========================
   Diagrama da arquitetura

   Três painéis lado a lado, como no original: contexto do
   modelo, REPL e sub-LLMs em paralelo. É grid, não imagem  
   por isso ele traduz, acende por fase e empilha no celular.
   ========================= */
.rlm-arch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--md);
  margin-top: var(--lg);
}

.rlm-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--md) calc(var(--sm) / 1.1) var(--sm);
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: #fff;
  min-width: 0;
}

.rlm-panel__tag {
  position: absolute;
  top: -9px;
  left: var(--sm);
  padding: 0 6px;
  background: #fff;
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.24);
  letter-spacing: .08em;
  color: var(--ink-45);
}

.rlm-panel__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: calc(var(--sm) / 2.4);
  min-height: 0;
}

.rlm-panel__body--cols {
  flex-direction: row;
  align-items: flex-start;
  gap: calc(var(--sm) / 2.4);
}

.rlm-sub {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: calc(var(--sm) / 2.4);
  min-width: 0;
}

/* os blocos: mesmas cores do diagrama original */
.rlm-box {
  padding: calc(var(--sm) / 1.8) calc(var(--sm) / 1.4);
  border: 1px solid transparent;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.2);
  line-height: 1.3;
  text-align: center;
  color: var(--ink-60);
  opacity: .42;
  overflow-wrap: anywhere;
  transition: opacity .35s ease, border-color .35s ease, color .35s ease, transform .35s ease;
}

.rlm-box--in    { background: rgba(63, 185, 80, .22); }
.rlm-box--think { background: rgba(150, 130, 220, .22); }
.rlm-box--call  { background: rgba(196, 110, 150, .24); }
.rlm-box--exec  { background: rgba(14, 16, 22, .05); flex: 1 1 auto; display: grid; place-items: center; min-height: 74px; }
.rlm-box--final { background: rgba(63, 185, 80, .22); margin-top: calc(var(--sm) / 2.4); }

.rlm-box.is-on {
  opacity: 1;
  border-color: color-mix(in srgb, var(--bg) 26%, transparent);
  color: var(--bg);
  font-weight: 700;
  transform: translateX(2px);
}

/* o espaço vazio do meio do contexto, como no original */
.rlm-gap { flex: 1 1 auto; min-height: 18px; }

/* as setas do original viram etiquetas na borda do painel:
   em três colunas não há espaço para desenhar a linha, e a
   etiqueta diz a mesma coisa sem virar ruído */
.rlm-arrow {
  align-self: flex-end;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(14, 16, 22, .04);
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.4);
  letter-spacing: .06em;
  color: var(--ink-45);
  opacity: .5;
  transition: opacity .35s ease, color .35s ease, background .35s ease;
}

.rlm-arrow.is-on {
  opacity: 1;
  color: var(--c-pink);
  background: color-mix(in srgb, var(--c-pink) 10%, #fff);
}

/* =========================
   Fases do fluxo
   ========================= */
.rlm-phases {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.6);
}

.rlm-phase {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--sm) / 2.2);
  padding: calc(var(--sm) / 1.8) var(--sm);
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: #fff;
  font-size: calc(var(--sm) / 1.06);
  color: var(--ink-60);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.rlm-phase:hover { border-color: var(--ink-45); color: var(--bg); }

.rlm-phase.is-seen { color: var(--ink-45); }

.rlm-phase.is-on {
  border-color: var(--c-purple);
  background: color-mix(in srgb, var(--c-purple) 8%, #fff);
  color: var(--bg);
  font-weight: 700;
}

.rlm-phase__n {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(14, 16, 22, .06);
  font-size: calc(var(--sm) / 1.3);
  font-weight: 700;
}

.rlm-phase.is-on .rlm-phase__n { background: var(--c-purple); color: #fff; }

/* =========================
   REPL: comandos e saída
   ========================= */
.rlm-cmds {
  display: flex;
  flex-direction: column;
  gap: calc(var(--sm) / 1.6);
  margin-top: var(--md);
}

.rlm-cmd {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: calc(var(--sm) / 1.3) var(--sm);
  border: 1px solid var(--hair);
  border-radius: 9px;
  background: #fff;
  text-align: left;
  transition: border-color .2s ease, background .2s ease;
}

.rlm-cmd:hover { border-color: var(--ink-45); }

.rlm-cmd.is-on {
  border-color: var(--prompt-green);
  background: color-mix(in srgb, var(--prompt-green) 6%, #fff);
}

.rlm-cmd code {
  font-family: var(--font-mono);
  font-size: calc(var(--md) / 1.12);
  color: var(--bg);
  overflow-wrap: anywhere;
}

.rlm-cmd span {
  font-size: calc(var(--sm) / 1.12);
  color: var(--ink-45);
}

.rlm-pre {
  margin-top: var(--md);
  padding: var(--md);
  border: 1px solid var(--hair-soft);
  border-radius: 9px;
  background: rgba(14, 16, 22, .025);
  font-family: var(--font-mono);
  font-size: calc(var(--sm) / 1.02);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
  color: var(--ink-80);
}

.rlm-pre--out { min-height: 84px; }

.rlm-cut {
  margin-top: calc(var(--sm) / 1.6);
  font-size: calc(var(--sm) / 1.06);
  color: var(--ink-45);
}

.rlm-cut.is-bad { color: var(--c-pink); font-weight: 700; }

/* =========================
   Leituras
   ========================= */
.rlm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--sm) / 1.4);
  margin-top: var(--md);
}

/* a etiqueta de veredito é uma frase, não um número: sem soltar o
   nowrap do .dd-pill ela estoura os 320 px em inglês e espanhol */
.rlm-stats .dd-pill { white-space: normal; }

.rlm-verdict {
  margin-top: var(--md);
  font-size: calc(var(--md) / 1.02);
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink-80);
}

.rlm-verdict.is-bad { color: var(--c-pink); }

/* tabela de prosa: as três colunas são texto, não número */
.rlm-table td,
.rlm-table th { text-align: left; vertical-align: top; }

.rlm-table td { font-size: calc(var(--sm) / 1.04); line-height: 1.45; }

/* =========================
   Responsivo
   ========================= */
@media (max-width: 900px) {
  .rlm-arch { grid-template-columns: minmax(0, 1fr); }
  .rlm-gap { display: none; }
  .rlm-box--exec { min-height: 52px; }
}

@media (max-width: 640px) {
  /* empilhado, o align-items: flex-start das colunas encolheria cada
     bloco ao tamanho do texto; aqui eles voltam a ocupar a largura */
  .rlm-panel__body--cols { flex-direction: column; align-items: stretch; }
  .rlm-box { font-size: calc(var(--sm) / 1.1); }
  .rlm-pre { max-height: 190px; font-size: calc(var(--sm) / 1.1); }
  .rlm-phase__name { display: none; }
  .rlm-phase { padding: calc(var(--sm) / 2) calc(var(--sm) / 1.4); }
}