/* Lecture 22 only. Loaded after lecture19.css; every rule is scoped to .l22-deck.
   Same text sizes as Lecture 20. */

.reveal.l22-deck .kicker { font-size: 22px; }
.reveal.l22-deck .composite-summary-slide > .slide-lead { font-size: 27px; }

/* Problem definitions: two panels, each with a Given row and a Goal row. */
.reveal.l22-deck .l21-defs .l21-def-body { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; width: 1400px; margin: auto 0 0; flex-shrink: 0; }
.reveal.l22-deck .l21-defs .l21-def-card { box-sizing: border-box; padding: 22px 26px 24px; border: 3px solid var(--blue); border-radius: 14px; background: white; }
.reveal.l22-deck .l21-defs .l21-def-card-red { border-color: #ff4756; }
.reveal.l22-deck .l21-defs .l21-def-head { margin-bottom: 14px; }
.reveal.l22-deck .l21-defs .l21-def-index { display: inline-block; padding: 4px 16px; border-radius: 18px; background: var(--blue); color: white; font-size: 22px; font-weight: 800; }
.reveal.l22-deck .l21-defs .l21-def-card-red .l21-def-index { background: #ff4756; }
.reveal.l22-deck .l21-defs .l21-def-head h3 { margin: 10px 0 0; color: var(--ink); font-size: 31px; line-height: 1.2; }
.reveal.l22-deck .l21-defs .l21-def-row { display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); }
.reveal.l22-deck .l21-defs .l21-def-tag { color: var(--blue); font-size: 23px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.reveal.l22-deck .l21-defs .l21-def-card-red .l21-def-tag { color: #ff4756; }
.reveal.l22-deck .l21-defs .l21-def-row p { margin: 0; color: var(--ink); font-size: 25px; line-height: 1.45; }
.reveal.l22-deck .l21-defs .l21-def-note { color: var(--ink-2); font-size: 22px; font-weight: 700; }
.reveal.l22-deck .l21-defs > .bb-takeaway { margin-top: 26px; }
.reveal.l22-deck .l21-defs::after { margin-top: auto; }

/* Partition-vote slide: give the bottom caption room below the panels. */
.reveal.l22-deck .l19-partition-poison .search-figure,
.reveal.l22-deck .l19-partition-poison .search-figure > svg { height: 445px; }

/* Small definition note under a takeaway. */
.reveal.l22-deck .l21-note { width: 1400px; margin: 8px 0 0; color: var(--ink-2); font-size: 22px; font-weight: 600; line-height: 1.3; flex-shrink: 0; }

/* Paper-figure slides: figure on the left, short points on the right. */
.reveal.l22-deck .l21-fig-body { display: grid; grid-template-columns: var(--fig-w, 860px) 1fr; gap: 36px; width: 1400px; margin: auto 0; align-items: center; flex-shrink: 0; }
.reveal.l22-deck .l21-fig-body.l21-fig-wide { grid-template-columns: 1fr; gap: 22px; }
.reveal.l22-deck .l21-fig-img { margin: 0; }
.reveal.l22-deck .l21-fig-img img { display: block; width: 100%; height: auto; max-height: 470px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: white; }
.reveal.l22-deck .l21-fig-img figcaption { margin-top: 6px; color: var(--ink-2); font-size: 22px; font-weight: 600; text-align: center; }
.reveal.l22-deck .l21-fig-points { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.reveal.l22-deck .l21-fig-wide .l21-fig-points { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.reveal.l22-deck .l21-fig-points li { margin: 0; padding: 4px 0 4px 18px; border-left: 5px solid var(--blue); color: var(--ink-2); font-size: 24px; line-height: 1.3; }
.reveal.l22-deck .l21-fig-points li.l21-red { border-left-color: #ff4756; }
.reveal.l22-deck .l21-fig-points li strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 27px; font-weight: 800; }
.reveal.l22-deck .l21-fig-points mjx-container { font-size: 100% !important; }
.reveal.slides section.l21-fig.present, .reveal .slides > section.l21-fig.present { display: flex !important; flex-direction: column; }
.reveal.l22-deck .l21-fig > .l19-eq { margin-top: 18px; flex-shrink: 0; }
.reveal.l22-deck .l21-fig > .bb-takeaway { margin-top: 18px; flex-shrink: 0; }
.reveal.l22-deck .l21-fig::after { content: ''; margin-top: auto; }
.reveal.l22-deck .l21-fig-center img { width: auto; max-width: 1400px; max-height: 500px; margin: 0 auto; }

/* Min-min slide. */
.reveal.l22-deck .l21-minmin .l21-mm-big { width: 1400px; margin: auto 0 0; padding: 14px 0 8px; border: 3px solid #ff4756; border-radius: 14px; background: #fff7f8; font-size: 34px; text-align: center; flex-shrink: 0; }
.reveal.l22-deck .l21-minmin .l21-mm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; width: 1400px; margin-top: 20px; flex-shrink: 0; }
.reveal.l22-deck .l21-minmin .l21-mm-card { padding: 14px 22px; border: 2.5px solid #b7c3d8; border-radius: 12px; background: white; }
.reveal.l22-deck .l21-minmin .l21-mm-red { border-color: #ff4756; background: #fff1f2; }
.reveal.l22-deck .l21-minmin .l21-mm-tag { color: var(--ink); font-size: 25px; font-weight: 800; }
.reveal.l22-deck .l21-minmin .l21-mm-eq { margin: 6px 0; font-size: 32px; }
.reveal.l22-deck .l21-minmin .l21-mm-card p { margin: 4px 0 0; color: var(--ink-2); font-size: 24px; line-height: 1.3; }
.reveal.l22-deck .l21-minmin .l21-mm-steps { width: 1400px; margin: 18px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; flex-shrink: 0; }
.reveal.l22-deck .l21-minmin .l21-mm-steps li { padding-left: 16px; border-left: 5px solid var(--blue); color: var(--ink-2); font-size: 23px; line-height: 1.3; }
.reveal.l22-deck .l21-minmin .l21-mm-steps b { display: block; color: var(--ink); font-size: 25px; }

/* Merged min-min + results layout. */
.reveal.l22-deck .l21-minmin .l21-mm-top { display: grid; grid-template-columns: 1fr 470px; gap: 28px; align-items: stretch; width: 1400px; margin: auto 0 0; flex-shrink: 0; }
.reveal.l22-deck .l21-minmin .l21-mm-top .l21-mm-big { width: auto; margin: 0; display: flex; align-items: center; justify-content: center; }
.reveal.l22-deck .l21-minmin .l21-mm-res { display: grid; grid-template-columns: 290px 1fr; gap: 28px; align-items: center; width: 1400px; margin-top: 22px; flex-shrink: 0; }
.reveal.l22-deck .l21-minmin .l21-mm-res img { max-height: 290px; }

/* Lecture 22: bigger paper figures, and a readable "Next lecture" label. */
.reveal.l22-deck .l21-fig-img img { max-height: 560px; }
.reveal.l22-deck .l21-fig-wide .l21-fig-img img { max-height: 470px; }
.reveal.l22-deck .summary-next span { font-size: 22px; }

/* Toy-loan metric slides: one question, numbers for A and B, one verdict. */
.reveal.l22-deck .l22-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; width: 1400px; margin: auto 0 0; flex-shrink: 0; }
.reveal.l22-deck .l22-cards.l22-one { grid-template-columns: 1fr; justify-items: center; }
.reveal.l22-deck .l22-one > .l22-card { width: 820px; }
.reveal.l22-deck .l22-card { box-sizing: border-box; padding: 20px 30px 22px; border: 3px solid var(--blue); border-radius: 14px; background: white; }
.reveal.l22-deck .l22-card.l22-red { border-color: #ff4756; }
.reveal.l22-deck .l22-card.l22-purple { border-color: #6d3fc0; }
.reveal.l22-deck .l22-card h3 { margin: 0 0 6px; color: var(--ink); font-size: 31px; line-height: 1.2; }
.reveal.l22-deck .l22-card h3 span { color: var(--ink-2); font-size: 24px; font-weight: 600; }
.reveal.l22-deck .l22-q { margin: 0 0 12px; color: var(--ink-2); font-size: 25px; line-height: 1.3; }
.reveal.l22-deck .l22-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 28px; }
.reveal.l22-deck .l22-g { font-weight: 800; }
.reveal.l22-deck .l22-ga { color: var(--blue); }
.reveal.l22-deck .l22-gb { color: #ff4756; }
.reveal.l22-deck .l22-calc { color: var(--ink-2); }
.reveal.l22-deck .l22-row b { color: var(--ink); font-size: 36px; }
.reveal.l22-deck .l22-verdict { margin: 10px 0 0; color: #ff4756; font-size: 28px; font-weight: 800; }
.reveal.l22-deck .l22-metric > .l19-eq { margin-top: 22px; flex-shrink: 0; }
.reveal.l22-deck .l22-cm { width: 100%; border-collapse: separate; border-spacing: 8px; font-size: 25px; }
.reveal.l22-deck .l22-cm th { color: var(--ink-2); font-weight: 700; text-align: center; }
.reveal.l22-deck .l22-cm tr th:first-child { text-align: right; }
.reveal.l22-deck .l22-cm td { padding: 10px 0; border-radius: 8px; color: white; font-size: 34px; font-weight: 800; text-align: center; }
.reveal.l22-deck .l22-cm td small { display: block; color: inherit !important; font-size: 22px; font-weight: 700; opacity: .9; }
.reveal.l22-deck .l22-cm td.tp { background: #2563c9; }
.reveal.l22-deck .l22-cm td.fn { background: #f7c33c; color: var(--ink); }
.reveal.l22-deck .l22-cm td.fp { background: #ff4756; }
.reveal.l22-deck .l22-cm td.tn { background: #13204a; }
.reveal.l22-deck .l22-cm-b { border-color: #ff4756; }
.reveal.l22-deck .l22-cm-card .l22-q { margin: 8px 0 0; color: var(--ink); font-size: 27px; font-weight: 800; text-align: center; }
.reveal.l22-deck .l22-conflict { width: 1200px; border-collapse: collapse; font-size: 28px; }
.reveal.l22-deck .l22-conflict th { padding: 10px 14px; border-bottom: 3px solid var(--ink); color: var(--ink); font-size: 26px; text-align: center; }
.reveal.l22-deck .l22-conflict td { padding: 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-align: center; vertical-align: middle; }
.reveal.l22-deck .l22-conflict td:first-child, .reveal.l22-deck .l22-conflict th:first-child { text-align: left; font-weight: 800; }
.reveal.l22-deck .l22-conflict small { display: block; color: var(--ink-2); font-size: 22px; }
.reveal.l22-deck .l22-yes { color: #1a8f4c; font-size: 38px; font-weight: 800; }
.reveal.l22-deck .l22-no { color: #ff4756; font-size: 38px; font-weight: 800; }
.reveal.l22-deck .l22-inter { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; width: 820px; }
.reveal.l22-deck .l22-cell { padding: 18px 24px; border: 3px solid var(--blue); border-radius: 14px; background: white; text-align: center; }
.reveal.l22-deck .l22-cell.l22-cb { border-color: #ff4756; }
.reveal.l22-deck .l22-cell.l22-small { background: #fff1f2; }
.reveal.l22-deck .l22-cell b { display: block; color: var(--ink); font-size: 30px; }
.reveal.l22-deck .l22-cell span { display: block; color: var(--ink); font-size: 40px; font-weight: 800; }
.reveal.l22-deck .l22-cell em { display: block; color: #ff4756; font-size: 25px; font-style: normal; font-weight: 800; }

/* Reminder of the toy-loan counts at the top of each metric slide. */
.reveal.l22-deck .l22-mini { display: flex; justify-content: center; gap: 48px; width: 1400px; margin: auto 0 0; flex-shrink: 0; }
.reveal.l22-deck .l22-mini + .l22-cards { margin-top: 20px; }
.reveal.l22-deck .l22-mini-t { display: flex; align-items: center; gap: 14px; padding: 6px 16px; border: 2px solid var(--blue); border-radius: 12px; background: white; }
.reveal.l22-deck .l22-mini-b { border-color: #ff4756; }
.reveal.l22-deck .l22-mini-t > b { color: var(--blue); font-size: 24px; }
.reveal.l22-deck .l22-mini-b > b { color: #ff4756; }
.reveal.l22-deck .l22-mini table { border-collapse: separate; border-spacing: 4px; font-size: 22px; }
.reveal.l22-deck .l22-mini th { padding: 0 6px; color: var(--ink-2); font-weight: 700; text-align: center; }
.reveal.l22-deck .l22-mini tr th:first-child { text-align: right; }
.reveal.l22-deck .l22-mini td { width: 64px; padding: 2px 0; border-radius: 6px; color: white; font-size: 25px; font-weight: 800; text-align: center; opacity: .28; }
.reveal.l22-deck .l22-mini td.on { opacity: 1; }
.reveal.l22-deck .l22-mini td.tp { background: #2563c9; }
.reveal.l22-deck .l22-mini td.fn { background: #f7c33c; color: var(--ink); }
.reveal.l22-deck .l22-mini td.fp { background: #ff4756; }
.reveal.l22-deck .l22-mini td.tn { background: #13204a; }
.reveal.l22-deck .l22-mini td.ringb { box-shadow: 0 0 0 3px #2563c9, 0 0 0 5px white; }
.reveal.l22-deck .l22-mini td.ringr { box-shadow: 0 0 0 3px #ff4756, 0 0 0 5px white; }
.reveal.l22-deck .l22-mini th.l22-rb { color: #2563c9; }
.reveal.l22-deck .l22-mini th.l22-rr { color: #ff4756; }
.reveal.l22-deck .l22-q .l22-cb { color: #2563c9; }
.reveal.l22-deck .l22-q .l22-cr { color: #ff4756; }
.reveal.l22-deck .l22-verdict.l22-ok { color: var(--ink); font-size: 25px; }
.reveal.l22-deck .l22-tests { display: grid; gap: 10px; width: 1400px; margin-top: 18px; flex-shrink: 0; }
.reveal.l22-deck .l22-test { padding: 10px 22px; border-left: 6px solid var(--blue); border-radius: 8px; background: #f2f6fd; color: var(--ink); font-size: 27px; }
.reveal.l22-deck .l22-test2 { border-left-color: #6d3fc0; background: #f6f1fd; }
.reveal.l22-deck .l22-no-t { color: #ff4756; font-weight: 800; }

/* Merged error-rate slide: more air around the two tests. */
.reveal.l22-deck .l22-tests { gap: 16px; margin-top: 26px; }
.reveal.l22-deck .l22-test { padding: 14px 24px; line-height: 1.35; }
.reveal.l22-deck .l22-tests + .bb-takeaway { margin-top: 26px; }

/* Feedback loop. */
.reveal.l22-deck .l22-loop { display: flex; align-items: stretch; gap: 10px; width: 1400px; margin: auto 0 0; flex-shrink: 0; }
.reveal.l22-deck .l22-loop-box { flex: 1; padding: 16px 20px; border: 3px solid var(--blue); border-radius: 14px; background: white; }
.reveal.l22-deck .l22-loop-red { border-color: #ff4756; background: #fff1f2; }
.reveal.l22-deck .l22-step { display: inline-block; margin-bottom: 8px; padding: 2px 14px; border-radius: 16px; background: var(--blue); color: white; font-size: 22px; font-weight: 800; }
.reveal.l22-deck .l22-loop-red .l22-step { background: #ff4756; }
.reveal.l22-deck .l22-loop-box p { margin: 0; color: var(--ink); font-size: 25px; line-height: 1.35; }
.reveal.l22-deck .l22-arrow { align-self: center; color: var(--ink-2); font-size: 36px; font-weight: 800; }
.reveal.l22-deck .l22-loop-back { width: 1400px; margin-top: 18px; padding: 10px 0; border: 2px dashed #ff4756; border-radius: 12px; color: #ff4756; font-size: 27px; font-weight: 800; text-align: center; flex-shrink: 0; }

/* Reweighting table. */
.reveal.l22-deck .l22-rw { width: 1100px; border-collapse: collapse; font-size: 27px; }
.reveal.l22-deck .l22-rw th { padding: 8px 14px; border-bottom: 3px solid var(--ink); color: var(--ink); font-size: 24px; text-align: center; }
.reveal.l22-deck .l22-rw td { padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--ink); text-align: center; }
.reveal.l22-deck .l22-rw td:first-child { text-align: left; }
.reveal.l22-deck .l22-rw td.l22-up { color: #ff4756; font-weight: 800; }
.reveal.l22-deck .l22-rw td.l22-down { color: var(--blue); font-weight: 800; }
.reveal.l22-deck .l22-metric > .l21-note { text-align: center; }
.reveal.l22-deck .l21-fig > .l21-note { text-align: center; flex-shrink: 0; }
