/* Slides 32–33: prediction loop and closing synthesis. */

/* ══════════════════════════════════════════════════════════════════
   Slide 32: Predict One Token, Append, Repeat
   ══════════════════════════════════════════════════════════════════ */

.pred32-layout {
  margin-top: var(--sp-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pred32-stage {
  padding: var(--sp-4);
  flex: 1;
  display: flex;
  align-items: center;
}

/* — 3-zone horizontal flow — */
.pred32-loop-flow {
  display: grid;
  grid-template-columns: 1fr auto 1.5fr auto 1fr;
  gap: var(--sp-3);
  align-items: center;
  width: 100%;
}

.pred32-flow-arrow {
  font-size: var(--fs-xl);
  color: var(--text-dim);
  opacity: 1;
  text-align: center;
  padding: 0 var(--sp-1);
  user-select: none;
}

/* — Zone shared styles — */
.pred32-ctx-zone,
.pred32-head-zone,
.pred32-select-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--radius-md);
  text-align: center;
}

/* — Zone 1: Context — */
.pred32-ctx-zone {
  border: 1px solid var(--border);
  background: var(--surface2);
}

.pred32-tokens-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  justify-content: center;
}

.pred32-zone-note {
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  font-style: italic;
  margin-top: var(--sp-1);
}

.pred32-policy-note {
  font-size: var(--fs-2xs);
  color: var(--text-dim);
}

/* — Zone 2: LM Head — */
.pred32-head-zone {
  border: 1px solid rgba(42, 79, 214, 0.3);
  background: rgba(42, 79, 214, 0.05);
}

.pred32-zone-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pred32-zone-title-green {
  color: var(--green);
}

.pred32-formula {
  font-size: var(--fs-sm);
  color: rgba(10, 20, 80, 0.9);
  font-family: 'JetBrains Mono', monospace;
  padding: 0.2rem 0.7rem;
  background: rgba(42, 79, 214, 0.08);
  border-radius: var(--radius-sm);
}

.pred32-softmax-label {
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  font-style: italic;
}

/* — Probability bars — */
.pred32-bars-row {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-end;
  height: 5.5rem;
}

.pred32-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.pred32-bar-item strong {
  font-size: var(--fs-2xs);
  color: var(--text-dim);
}

.pred32-bar {
  width: 1.75rem;
  background: var(--border);
  border-radius: 3px 3px 0 0;
  transition: height 0.4s ease;
}

.pred32-bar.is-top {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(42, 79, 214, 0.35);
}

.pred32-bar-label {
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

/* — Zone 3: Selected token — */
.pred32-select-zone {
  border: 1px solid rgba(15, 110, 47, 0.55);
  background: rgba(15, 110, 47, 0.04);
}

.pred32-selected-token {
  background: rgba(15, 110, 47, 0.15) !important;
  border-color: rgba(15, 110, 47, 0.4) !important;
  color: var(--green) !important;
  font-size: var(--fs-base) !important;
  padding: 0.3rem 0.8rem !important;
}

.pred32-loop-note {
  font-size: var(--fs-sm);
  color: var(--accent);
  font-style: italic;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* — State class — */
#slide-32.pred32-show-loop .pred32-loop-note {
  opacity: 1;
}


/* ══════════════════════════════════════════════════════════════════
   Slide 33: From Probabilities to Behavior
   ══════════════════════════════════════════════════════════════════ */

.decode33-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.45rem;
  min-height: 0;
}

.decode33-distribution-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0.6rem;
  border: 1px solid rgba(42, 79, 214, 0.25);
  background: linear-gradient(180deg, rgba(42, 79, 214, 0.08), rgba(255, 255, 255, 0.92));
}

.decode33-kicker {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-align: center;
}

.decode33-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
}

.decode33-inline-arrow {
  font-size: var(--fs-lg);
  color: var(--text-dim);
}

.decode33-softmax-pill,
.decode33-dist-label {
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
}

.decode33-softmax-pill {
  border: 1px solid rgba(42, 79, 214, 0.3);
  background: rgba(42, 79, 214, 0.08);
  color: var(--accent);
  font-style: normal;
}

.decode33-dist-label {
  border: 1px solid rgba(61, 69, 112, 0.2);
  background: rgba(61, 69, 112, 0.08);
  color: #23304f;
  font-weight: 600;
}

.decode33-bars-row {
  justify-content: center;
}

.decode33-fixed-note {
  text-align: center;
  font-size: var(--fs-xs);
  color: #23304f;
  font-weight: 600;
}

.decode33-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.decode33-policy-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface2);
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.decode33-policy-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #0d1020;
}

.decode33-policy-body {
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  line-height: 1.45;
}

.decode33-policy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.decode33-policy-label {
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.decode33-policy-token {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0;
  flex: 0 0 auto;
  justify-self: auto;
  grid-column: auto;
  font-size: var(--fs-2xs) !important;
  padding: 0.18rem 0.5rem !important;
  border-color: rgba(61, 69, 112, 0.3) !important;
  white-space: nowrap;
}

.decode33-topk-keep-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.decode33-policy-token.decode33-greedy-token {
  background: rgba(15, 110, 47, 0.14) !important;
  border-color: rgba(15, 110, 47, 0.35) !important;
  color: var(--green) !important;
}

.decode33-policy-token.decode33-temp-token {
  background: rgba(90, 48, 200, 0.12) !important;
  border-color: rgba(90, 48, 200, 0.3) !important;
  color: var(--purple) !important;
}

.decode33-policy-token.decode33-topk-token {
  background: rgba(42, 79, 214, 0.12) !important;
  border-color: rgba(42, 79, 214, 0.3) !important;
  color: var(--accent) !important;
}

.decode33-bridge-line {
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(15, 110, 47, 0.25);
  background: rgba(15, 110, 47, 0.08);
  color: #08341b;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
}


/* ══════════════════════════════════════════════════════════════════
   Slide 34: You Now Know the Transformer
   ══════════════════════════════════════════════════════════════════ */

.close33-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.78rem;
  margin-top: 0.68rem;
  min-height: 0;
}

.slide-has-takeaway .pred32-layout,
.slide-has-takeaway .close33-layout {
  margin-top: 0.3rem;
}

/* — Pipeline diagram — */
.close33-pipeline-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.close33-pipeline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
}

/* Larger segments for the closing slide */
.close33-pipeline .gen33-seg {
  font-size: var(--fs-sm);
  padding: 0.3rem 0.65rem;
}

.close33-pipeline .gen33-seg-arrow,
.close33-pipeline .gen33-seg-arrow-sm {
  font-size: var(--fs-xs);
  padding: 0;
}

.close33-pipeline .gen33-seg-bracket {
  font-size: var(--fs-sm);
}

.close33-loop-label {
  font-size: var(--fs-xs);
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
}

.close33-summary-band {
  padding: 0.54rem 0.7rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(42, 79, 214, 0.55);
  background: rgba(42, 79, 214, 0.08);
  font-size: var(--fs-xs);
  color: #0d1020;
  line-height: 1.36;
  text-align: center;
}

/* — Bottom section (insights + question) — */
.close33-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.56rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s ease, max-height 0.5s ease;
  pointer-events: none;
}

#slide-34.gen33-show-insights .close33-bottom {
  opacity: 1;
  max-height: 50rem;
  pointer-events: auto;
}

/* — Insight cards grid — */
.close33-insights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.56rem;
}

.close33-insight-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface2);
  padding: 0.68rem 0.76rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.close33-insight-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.close33-insight-body {
  font-size: var(--fs-2xs);
  color: var(--text-dim);
  line-height: 1.42;
}

#slide-34 .callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.56rem 0.72rem;
  font-size: var(--fs-xs);
  line-height: 1.38;
  align-items: start;
}

#slide-34 .callout span:last-child {
  min-width: 0;
}

.close33-context-line,
.close33-stop-line {
  font-size: var(--fs-xs);
  text-align: center;
  line-height: 1.4;
}

.close33-context-line {
  color: #23304f;
  font-weight: 600;
}

.close33-stop-line {
  color: var(--text-dim);
}

/* — Per-topic accent colors — */
.close33-insight-blue {
  border-color: rgba(42, 79, 214, 0.3);
}
.close33-insight-blue .close33-insight-title {
  color: var(--accent);
}

.close33-insight-purple {
  border-color: rgba(90, 48, 200, 0.3);
}
.close33-insight-purple .close33-insight-title {
  color: var(--purple);
}

.close33-insight-cyan {
  border-color: rgba(0, 120, 144, 0.3);
}
.close33-insight-cyan .close33-insight-title {
  color: var(--cyan);
}

.close33-insight-green {
  border-color: rgba(15, 110, 47, 0.3);
}
.close33-insight-green .close33-insight-title {
  color: var(--green);
}


/* ══════════════════════════════════════════════════════════════════
   Pipeline segment colors (used by both slides)
   ══════════════════════════════════════════════════════════════════ */

.gen33-seg {
  font-size: var(--fs-2xs);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.gen33-seg-embed {
  background: rgba(42, 79, 214, 0.15);
  color: #0a1a80;
  border: 1px solid rgba(42, 79, 214, 0.55);
}

.gen33-seg-position {
  background: rgba(106, 79, 0, 0.12);
  color: #4a3200;
  border: 1px solid rgba(106, 79, 0, 0.55);
}

.gen33-seg-norm {
  background: rgba(61, 69, 112, 0.1);
  color: var(--text-dim);
  border: 1px solid rgba(61, 69, 112, 0.55);
}

.gen33-seg-attn {
  background: rgba(90, 48, 200, 0.14);
  color: #2e1a80;
  border: 1px solid rgba(90, 48, 200, 0.55);
}

.gen33-seg-ffn {
  background: rgba(0, 120, 144, 0.1);
  color: #003844;
  border: 1px solid rgba(0, 120, 144, 0.55);
}

.gen33-seg-add {
  color: var(--text-dim);
  font-size: var(--fs-xs);
}

.gen33-seg-head {
  background: rgba(15, 110, 47, 0.12);
  color: #084020;
  border: 1px solid rgba(15, 110, 47, 0.55);
}

.gen33-seg-decode {
  background: rgba(15, 110, 47, 0.18);
  color: #084020;
  border: 1px solid rgba(15, 110, 47, 0.3);
  font-weight: 700;
}

.gen33-seg-append {
  background: rgba(106, 79, 0, 0.12);
  color: #5a3a00;
  border: 1px solid rgba(106, 79, 0, 0.35);
}

.gen33-seg-arrow,
.gen33-seg-arrow-sm {
  color: var(--text-dim);
  background: none;
  border: none;
  padding: 0 0.1rem;
  font-weight: 400;
}

.gen33-seg-arrow-sm {
  font-size: 0.55rem;
}

.gen33-seg-bracket {
  color: var(--purple);
  background: none;
  border: none;
  padding: 0;
}


/* ══════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .decode33-policy-grid,
  .close33-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .pred32-loop-flow {
    grid-template-columns: 1fr;
  }

  .pred32-flow-arrow {
    transform: rotate(90deg);
  }

  .decode33-policy-grid,
  .close33-insights {
    grid-template-columns: 1fr;
  }
}