/* ─────────────────────────────────────────────────────────────────────
   TB-MNIST-Demo, Live-Visualisierung der Ziffern-Erkennung
   Layout: Canvas links (Quadrat), Wahrscheinlichkeits-Bars rechts daneben.
   Auf schmalen Bildschirmen: gestapelt (Bars unter Canvas).
   ───────────────────────────────────────────────────────────────────── */

.tb-mnist {
  --tbm-canvas:    480px;   /* Pixel-Display-Groesse, intern bleibt 28x28.
                                Mittelweg: gross genug zum Malen, aber laesst
                                den Bars rechts ausreichend Luft (kein Overlap). */
  --tbm-grid:      rgba(120, 120, 160, 0.18);  /* dezente Pixelraster-Linien */
  --tbm-bg:        #fbfbff;
  --tbm-ink:       #0E0E2A;
  --tbm-accent:    #1919C8;
  --tbm-accent-hi: #16a34a;

  margin: var(--space-6, 2rem) auto;
  max-width: 1100px;       /* matched die tb-ku__section Breite */
  font-family: Inter, system-ui, sans-serif;
  color: var(--tbm-ink);
}
.tb-mnist--compact { --tbm-canvas: 320px; }
.tb-mnist--mini    { --tbm-canvas: 220px; max-width: 240px; margin: 0 auto; }
/* Mini-Variante: Bars unter dem Canvas (vertikaler Stack), schmal genug
   fuer Sidebar/Teaser-Einsatz. Alles deutlich kompakter. */
.tb-mnist--mini .tb-mnist__stage {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.55rem;
}
.tb-mnist--mini .tb-mnist__canvas-wrap {
  border-radius: 10px;
}
.tb-mnist--mini .tb-mnist__bars {
  width: var(--tbm-canvas);
  max-width: var(--tbm-canvas);
  height: 50px;
  gap: 0.25rem;
  justify-self: center;
}
.tb-mnist--mini .tb-mnist__bar { max-width: none; }
.tb-mnist--mini .tb-mnist__bar-label {
  font-size: 0.72rem;
  margin-top: 0.15rem;
  font-weight: 600;
}
.tb-mnist--mini .tb-mnist__bar-pct { display: none; }
.tb-mnist--mini .tb-mnist__bar-track { border-radius: 3px; }
.tb-mnist--mini .tb-mnist__hint span { font-size: 0.72rem; padding: 0.25rem 0.6rem; }
.tb-mnist--mini .tb-mnist__controls {
  margin-top: 0.55rem;
  gap: 0.35rem;
  justify-content: center;
}
/* Alle 3 Buttons in mini gleich gross, gleiche Form, gleiche Hoehe */
.tb-mnist--mini .tb-mnist__ctrl {
  padding: 0.32rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 999px;
  min-height: auto;
  line-height: 1.3;
}
.tb-mnist--mini .tb-mnist__ctrl--cta { margin-left: 0; }   /* in Reihe lassen, nicht rechts pushen */

/* ── DARK-MODE ─────────────────────────────────────────────────────
   Fuer Einsatz auf dunklen Sektionen (z.B. Hauptseiten-USP). Hellt
   das Pixelraster auf, invertiert die Schrift- und Bar-Farben. */
.tb-mnist--dark {
  --tbm-bg:  rgba(255, 255, 255, 0.06);
  --tbm-ink: #f0f4ff;
}
.tb-mnist--dark .tb-mnist__canvas-wrap {
  border-color: rgba(123, 231, 245, 0.25);
  background: rgba(255, 255, 255, 0.96);   /* hell, fuer schwarze Brush-Striche */
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
.tb-mnist--dark .tb-mnist__hint {
  color: rgba(14, 14, 42, 0.55);
}
.tb-mnist--dark .tb-mnist__hint span {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(14, 14, 42, 0.12);
}
.tb-mnist--dark .tb-mnist__bar-track {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(123, 231, 245, 0.18);
}
.tb-mnist--dark .tb-mnist__bar-fill {
  background: linear-gradient(180deg,
              color-mix(in srgb, #7be7f5 80%, white),
              #1919C8);
}
.tb-mnist--dark .tb-mnist__bar.is-winner .tb-mnist__bar-fill {
  background: linear-gradient(180deg,
              color-mix(in srgb, #16a34a 75%, white),
              #16a34a);
  box-shadow: 0 0 14px rgba(22, 163, 74, 0.55);
}
.tb-mnist--dark .tb-mnist__bar-label {
  color: rgba(240, 244, 255, 0.65);
}
.tb-mnist--dark .tb-mnist__bar.is-winner .tb-mnist__bar-label {
  color: #7be7f5;
}
.tb-mnist--dark .tb-mnist__bar.is-active:not(.is-winner) .tb-mnist__bar-label {
  color: #b6dfff;
}
/* Dark-Variante: .tb-btn--ghost wird umgefaerbt fuer dunklen Hintergrund.
   Geltungsbereich auf .tb-mnist--dark beschraenkt, beeinflusst andere
   Stellen mit .tb-btn nicht. */
.tb-mnist--dark .tb-btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(123, 231, 245, 0.30);
  color: #f0f4ff;
}
.tb-mnist--dark .tb-btn--ghost:hover {
  background: rgba(123, 231, 245, 0.18);
  border-color: rgba(123, 231, 245, 0.55);
  color: #7be7f5;
}
.tb-mnist--dark .tb-btn--primary {
  /* Cyan-tint mit border, NICHT mehr glowing Gradient, soll ruhiger und
     einheitlicher mit ghost-Buttons rechts/links wirken. */
  background: rgba(123, 231, 245, 0.18);
  color: #f0f4ff;
  border: 1px solid rgba(123, 231, 245, 0.55);
  box-shadow: none;
}
.tb-mnist--dark .tb-btn--primary:hover {
  background: rgba(123, 231, 245, 0.28);
  border-color: rgba(123, 231, 245, 0.80);
  color: #7be7f5;
}
.tb-mnist--dark .tb-mnist__status,
.tb-mnist--dark .tb-mnist__demos-lab {
  color: rgba(240, 244, 255, 0.55);
}

/* ── MINIMAL-Variante: kein Status, schlanker Footer, alles zentriert ── */
.tb-mnist--minimal .tb-mnist__controls {
  justify-content: center;
  gap: 0.5rem 0.7rem;
  margin-top: 0.7rem;
}
/* In minimal-mode soll auch der CTA mittig in der Reihe stehen,
   nicht per margin-left:auto rechts gedrueckt werden. */
.tb-mnist--minimal .tb-mnist__ctrl--cta { margin-left: 0; }
.tb-mnist--minimal .tb-mnist__hint span {
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
}

/* CTA-Button nutzt .tb-btn .tb-btn--primary (site-weit konsistent),
   die ctrl-Klassen oben halten ihn kompakt und legen ihn nach rechts. */

.tb-mnist__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 var(--space-3, 1rem);
  letter-spacing: -0.01em;
}

.tb-mnist__stage {
  display: grid;
  grid-template-columns: var(--tbm-canvas) 1fr;
  gap: var(--space-5, 1.75rem);
  align-items: stretch;
}
@media (max-width: 720px) {
  /* Mobile-Defaults gelten NUR fuer NICHT-mini Variante.
     Die mini-Variante (im USP-Block) bleibt bei ihrem 220px-Canvas,
     sonst laeuft sie ueber den Container hinaus. */
  .tb-mnist:not(.tb-mnist--mini) { --tbm-canvas: min(360px, 90vw); }
  .tb-mnist:not(.tb-mnist--mini) .tb-mnist__stage {
    grid-template-columns: 1fr; justify-items: center;
  }
  .tb-mnist:not(.tb-mnist--mini) .tb-mnist__bars {
    width: min(360px, 92vw);
    max-width: min(360px, 92vw);
    justify-self: center;
    height: auto;
    aspect-ratio: 1.4 / 1;
  }
  /* Mini-Variante: auf Mobile noch enger, max-content-width der USP-Spalte */
  .tb-mnist--mini { --tbm-canvas: min(220px, 80vw); max-width: 92vw; }
  /* Controls auf Mobile sauber zentrieren, Auto-Demo-Block bei Bedarf
     in zweite Zeile, Buttons konsistent gross genug fuer Touch. */
  .tb-mnist__controls {
    justify-content: center;
    gap: 0.5rem 0.7rem;
  }
  .tb-mnist__demos {
    justify-content: center;
    flex-wrap: wrap;
  }
  .tb-mnist__ctrl {
    padding: 0.55rem 1.1rem;     /* min-touch-target 44px */
    font-size: 0.9rem;
  }
  .tb-mnist__ctrl--digit {
    min-width: 2.6rem;
    padding: 0.45rem 0.85rem;
  }
  .tb-mnist__ctrl--cta {
    margin-left: 0;              /* nicht rechts pushen, mit-zentrieren */
  }
  .tb-mnist__status {
    margin-left: 0;
    width: 100%;
    text-align: center;
    margin-top: 0.3rem;
  }
}

/* ── Canvas-Bereich ─────────────────────────────────────────────── */
.tb-mnist__canvas-wrap {
  position: relative;
  width: var(--tbm-canvas);
  height: var(--tbm-canvas);
  background: var(--tbm-bg);
  border: 1px solid color-mix(in srgb, var(--tbm-ink) 15%, transparent);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(14, 14, 42, 0.06);
  flex: 0 0 auto;
}
.tb-mnist__grid,
.tb-mnist__paint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* image-rendering pixelated bewahrt die "Pixel-Optik" beim Skalieren */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.tb-mnist__grid { z-index: 1; pointer-events: none; }
.tb-mnist__paint {
  z-index: 2;
  cursor: crosshair;
  touch-action: none;     /* verhindert Scroll beim Malen am Touchscreen */
}
.tb-mnist__paint:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tbm-accent) 60%, transparent);
  outline-offset: -3px;
}
.tb-mnist__hint {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--tbm-ink) 55%, transparent);
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.05));
  transition: opacity .25s ease;
}
.tb-mnist__hint span {
  background: rgba(255,255,255,0.85);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tbm-ink) 12%, transparent);
}
.tb-mnist.is-drawing .tb-mnist__hint,
.tb-mnist.has-content .tb-mnist__hint { opacity: 0; }

/* Cooldown-State: nach Pen-Up Commit ist der Canvas fuer ~600ms gesperrt,
   damit ein zweiter Strich nicht versehentlich nochmal die gleiche Ziffer
   committet. Cursor wechselt zu "wait", Pixelraster dimmt leicht, kein
   pointer-event geht durch. Effekt ist absichtlich kurz und subtil, der
   User soll merken dass gerade umgeschaltet wird, ohne sich gebremst zu fuehlen. */
.tb-mnist.is-cooldown .tb-mnist__paint {
  cursor: wait;
  pointer-events: none;
}
.tb-mnist.is-cooldown .tb-mnist__canvas-wrap {
  opacity: 0.55;
  transition: opacity .15s ease;
}

/* ── Wahrscheinlichkeits-Bars ──────────────────────────────────── */
.tb-mnist__bars {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0.6rem;
  align-items: end;
  height: var(--tbm-canvas);
  padding: 0;
  /* Bars bleiben schlank: max ~42 px je Spalte, der Rest wird zentriert. */
  max-width: 460px;
  justify-self: end;
}
.tb-mnist__bar {
  --p: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  min-width: 0;
  width: 100%;
  max-width: 42px;
  justify-self: center;
}
.tb-mnist__bar-track {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  background: color-mix(in srgb, var(--tbm-ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--tbm-ink) 8%, transparent);
  border-radius: 8px;
  overflow: hidden;
}
.tb-mnist__bar-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--p) * 100%);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--tbm-accent) 75%, white),
              var(--tbm-accent));
  transition: height .22s cubic-bezier(.2,.7,.3,1);
  border-radius: 5px 5px 0 0;
}
.tb-mnist__bar-pct {
  position: absolute;
  bottom: 0.35rem;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity .15s ease;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.tb-mnist__bar.is-active .tb-mnist__bar-pct { opacity: 1; }
.tb-mnist__bar.is-winner .tb-mnist__bar-fill {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--tbm-accent-hi) 80%, white),
              var(--tbm-accent-hi));
  box-shadow: 0 0 14px color-mix(in srgb, var(--tbm-accent-hi) 50%, transparent);
}
.tb-mnist__bar-label {
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  margin-top: 0.55rem;
  color: color-mix(in srgb, var(--tbm-ink) 70%, transparent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color .15s ease, transform .15s ease;
}
.tb-mnist__bar.is-winner .tb-mnist__bar-label {
  color: var(--tbm-accent-hi);
  transform: scale(1.2);
}
.tb-mnist__bar.is-active:not(.is-winner) .tb-mnist__bar-label {
  color: var(--tbm-accent);
}

/* ── Output-Zeile (Pen-Up Commit Workflow) ─────────────────────────
   Erkannte Ziffern landen hier per Pen-Up im Input-Feld. Clear-Button (x)
   leert nur das Feld, nicht den Canvas. Hauptachse: Input nimmt den Platz,
   Label klein davor, Clear klein danach. */
.tb-mnist__output {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: var(--space-3, 1rem);
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--tbm-ink) 60%, transparent);
}
.tb-mnist__output-label {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.72rem;
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--tbm-ink) 55%, transparent);
}
.tb-mnist__output-field {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 0.75rem;
  font-family: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--tbm-ink);
  background: var(--tbm-bg);
  border: 1px solid color-mix(in srgb, var(--tbm-ink) 18%, transparent);
  border-radius: 8px;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tb-mnist__output-field:focus-visible {
  border-color: color-mix(in srgb, var(--tbm-accent) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tbm-accent) 22%, transparent);
}
.tb-mnist__output-field::placeholder {
  color: color-mix(in srgb, var(--tbm-ink) 35%, transparent);
  font-weight: 500;
  letter-spacing: 0;
}
/* Highlight-Flash, wenn eine Ziffer frisch eingetragen wurde, sehr dezent,
   nur fuer 600ms sichtbar. Sorgt fuer Feedback dass es eine Eintragung gab. */
.tb-mnist__output-field.is-committed {
  border-color: var(--tbm-accent-hi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tbm-accent-hi) 25%, transparent);
}
.tb-mnist__output-clear {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  color: color-mix(in srgb, var(--tbm-ink) 45%, transparent);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tb-mnist__output-clear:hover {
  background: color-mix(in srgb, var(--tbm-ink) 8%, transparent);
  color: var(--tbm-ink);
}
.tb-mnist__output-clear:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tbm-accent) 60%, transparent);
  outline-offset: 2px;
}

/* Dark-Mode-Anpassungen */
.tb-mnist--dark .tb-mnist__output-label {
  color: rgba(240, 244, 255, 0.55);
}
.tb-mnist--dark .tb-mnist__output-field {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(123, 231, 245, 0.30);
  color: #f0f4ff;
}
.tb-mnist--dark .tb-mnist__output-field:focus-visible {
  border-color: rgba(123, 231, 245, 0.70);
  box-shadow: 0 0 0 3px rgba(123, 231, 245, 0.18);
}
.tb-mnist--dark .tb-mnist__output-field::placeholder {
  color: rgba(240, 244, 255, 0.30);
}
.tb-mnist--dark .tb-mnist__output-field.is-committed {
  border-color: #7be7f5;
  box-shadow: 0 0 0 3px rgba(123, 231, 245, 0.30);
}
.tb-mnist--dark .tb-mnist__output-clear {
  color: rgba(240, 244, 255, 0.55);
}
.tb-mnist--dark .tb-mnist__output-clear:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #f0f4ff;
}

/* Mini-Variante: kompakter, kleinere Font, schmaleres Feld */
.tb-mnist--mini .tb-mnist__output {
  width: var(--tbm-canvas);
  max-width: var(--tbm-canvas);
  margin-top: 0.55rem;
  gap: 0.4rem;
  justify-self: center;
}
.tb-mnist--mini .tb-mnist__output-label {
  font-size: 0.65rem;
}
.tb-mnist--mini .tb-mnist__output-field {
  height: 32px;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  padding: 0 0.55rem;
}
.tb-mnist--mini .tb-mnist__output-clear {
  width: 24px;
  height: 24px;
  font-size: 1rem;
}

/* ── Controls ───────────────────────────────────────────────────── */
.tb-mnist__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: var(--space-4, 1.25rem);
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--tbm-ink) 60%, transparent);
}
/* MNIST-Controls nutzen die site-weite .tb-btn-Klasse fuer den
   Visual-Identity-Match. Hier nur der Compact-Override fuer die
   Padding/Font-Groesse, weil .tb-btn fuer CTA-Hero-Buttons designed ist. */
.tb-mnist__ctrl {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  border-radius: 999px;
  gap: 0.4rem;
}
.tb-mnist__ctrl--digit {
  min-width: 2.4rem;
  padding: 0.35rem 0.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.tb-mnist__ctrl--cta {
  margin-left: auto;
}
.tb-mnist__demos {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.tb-mnist__demos-lab {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--tbm-ink) 55%, transparent);
}
.tb-mnist__status {
  margin-left: auto;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--tbm-ink) 50%, transparent);
}
.tb-mnist__status.is-error { color: #dc2626; }
.tb-mnist__status.is-ready { color: var(--tbm-accent-hi); }

@media (prefers-reduced-motion: reduce) {
  .tb-mnist__bar-fill,
  .tb-mnist__bar-label { transition: none; }
}