/* Kapitel 119 — Brainy zum Anfassen. NUR Modul-Spezialoptik; alles Allgemeine
   (Kaesten, Knoepfe, .output, .matrix-viz, .shape-badge) kommt aus assets/css/style.css. */

/* ---------- Matrix-Rechner: W · x = Ergebnis, umbruchfaehig ab 360 px ---------- */
.br-rechner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem .9rem; margin: .9rem 0;
}
.br-label {
  font-weight: 700; font-size: .85rem; text-align: center; margin-bottom: .35rem;
  color: var(--hk-text-soft);
}
.br-zeile { display: flex; gap: .3rem; justify-content: center; margin-bottom: .3rem; }
.br-zeile input[type=number] {
  width: 62px; min-width: 0; padding: .4rem .25rem; text-align: center;
  border: 2px solid var(--hk-rahmen); border-radius: 8px;
  font-family: 'Courier New', monospace; font-size: .95rem; font-weight: 700;
  background: #fff; color: var(--hk-text);
}
.br-zeile input[type=number]:focus { outline: 2px solid var(--hk-blau); outline-offset: 1px; }
/* die an der aktuellen Rechnung beteiligten Felder */
.br-zeile input.br-hervor { background: var(--hk-blau-hell); border-color: var(--hk-blau); }
.br-mal { font-size: 1.4rem; font-weight: 700; color: var(--hk-blau); padding: 0 .1rem; }
.br-rechner .matrix-viz { margin: 0; }

/* ---------- PHP und JS-Port nebeneinander (ab 760 px zwei Spalten) ---------- */
.br-nebeneinander { display: grid; grid-template-columns: 1fr; gap: .2rem; }
.br-nebeneinander .code-block { font-size: .8rem; margin: .5rem 0; }

/* ---------- XOR-Trainer: Loss-Kurve und Entscheidungskarte ---------- */
.br-doppel { display: grid; grid-template-columns: 1fr; gap: .2rem; }
.br-doppel .chart-container { margin: .6rem 0; padding: .5rem; }
.br-legende { font-size: .88rem; color: var(--hk-text-soft); margin-top: -.2rem; }

/* ---------- Gewichtsmatrizen nach dem Training ---------- */
.br-gewichte {
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem;
  justify-content: center; align-items: flex-start; margin-top: .9rem;
}
.br-gewicht { text-align: center; }
.br-gewicht-titel {
  font-family: 'Courier New', monospace; font-weight: 700; font-size: .82rem;
  color: var(--hk-blau); margin-bottom: .25rem;
}
/* etwas kleinere Kacheln als global, damit W1 (2x3) auch auf 360 px passt */
.br-gewicht .matrix-viz { margin: 0; gap: .25rem; }
.br-gewicht .matrix-element {
  min-width: 44px; height: 34px; font-size: .8rem; border-width: 1px; border-radius: 6px;
}

@media (min-width: 760px) {
  .br-nebeneinander { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .br-doppel { grid-template-columns: 1fr 1fr; gap: .6rem; }
}