/* Readability refinements shared by the reviewed tutorial slides. */
.guiding-layout { grid-template-columns: 1fr; gap: 40px; margin-block: auto; }
.guiding-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.guiding-reasons.is-four { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.guiding-reasons.is-four .guiding-reason-copy strong { font-size: 22px; }
.guiding-reasons.is-four .guiding-reason-copy span { font-size: 16px; }
.guiding-reason { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px 0; border: 0; background: none; }
.guiding-reason-copy { gap: 12px; }
.guiding-reason-copy strong { font-size: 25px; }
.guiding-reason-copy span { font-size: 18px; line-height: 1.45; }
.guiding-reason-icon { width: 56px; height: 56px; }
.guiding-reason-icon svg { width: 48px; height: 48px; }
.guiding-takeaway { border: 0; border-top: 1px solid var(--line); padding: 20px 0; background: none; }
.interaction-matrix { display: table; table-layout: fixed; border-collapse: separate; border-spacing: 6px; width: 100%; max-width: none; }
.interaction-matrix th:first-child, .interaction-matrix td:first-child { width: 34px; }
.interaction-matrix th { font: 500 13px/1.2 var(--font-mono); color: var(--muted); text-align: center; }
.interaction-matrix .matrix-cell { width: 36px; height: 32px; font: 500 12px/1 var(--font-mono); color: var(--muted); text-align: center; }
.interaction-matrix .matrix-cell.is-hit { color: white; }
.interaction-matrix .is-example-user th { color: var(--blue-600); font-weight: 700; }
.interaction-matrix tr:not(.is-example-user) .matrix-cell.is-hit { background: var(--blue-300); }
.matrix-timeline { grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 1.2fr); }
.matrix-timeline { align-items: start; column-gap: 38.4px; }
.matrix-timeline .matrix-view,
.matrix-timeline .timeline-view {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.matrix-timeline .foundation-bridge { align-self: center; padding-top: 24px; }
.matrix-timeline .foundation-takeaway {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  justify-content: start;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--border-hairline);
  background: transparent;
}
.matrix-timeline .foundation-takeaway-label {
  color: var(--text-accent);
  font: 500 12px/1.3 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.matrix-timeline .foundation-takeaway strong {
  color: var(--text-primary);
  font: 500 17.28px/1.35 var(--font-body);
}
.matrix-timeline .foundation-chips { display: none; }
.foundation-movie-card { min-width: 0; margin: 0; }
.foundation-movie-artwork { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--data-masked); border: 1px solid var(--border-hairline); }
.foundation-movie-artwork img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foundation-movie-fallback { display: grid; place-items: center; height: 100%; padding: 4px; color: var(--text-muted); font: 12px/1.2 var(--font-body); text-align: center; }
.foundation-movie-card figcaption { padding-top: 6px; color: var(--text-primary); font: 500 15px/1.2 var(--font-body); }
.matrix-movie-column { vertical-align: top; padding-bottom: 8px; }
.matrix-movie-column figcaption { font-size: 12px; }
.movie-event-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin: 18px 0 0; padding: 0; list-style: none; }
.movie-event { position: relative; min-width: 0; }
.movie-event-time { display: block; margin-bottom: 8px; color: var(--text-muted); font: 500 13px/1.2 var(--font-mono); }
.movie-event:not(:last-child)::after { content: "→"; position: absolute; top: 48%; right: -18px; color: var(--text-muted); font: 20px/1 var(--font-body); }
.foundation-takeaway { font-size: 20px; }
#why-movielens-here .slide-main { container-type: size; }
.movielens-rationale {
  flex: 1;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 24px;
  margin-top: 20px;
}
.movielens-rationale .foundation-label { display: block; }
.movielens-catalog {
  display: block;
  padding: 0;
  border: 0;
}
.movielens-poster-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; margin-top: 12px; }
.movielens-example-card { min-width: 0; margin: 0; }
.movielens-example-card img { width: 60px; height: 90px; object-fit: cover; display: block; border: 1px solid var(--border-hairline); }
.movielens-example-card figcaption { display: -webkit-box; overflow: hidden; padding-top: 4px; font: 500 12px/1.2 var(--font-body); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.movielens-event-label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; white-space: nowrap; }
.movielens-event-user { color: var(--text-accent); font: 500 12px/1.2 var(--font-mono); }
.movielens-event-rating { color: var(--text-primary); font: 12px/1.2 var(--font-body); letter-spacing: -.04em; }
.movielens-dataset { min-width: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.movielens-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 14px 0 0; }
.movielens-stat { min-width: 0; padding-right: 18px; border-right: 1px solid var(--line); }
.movielens-stat:last-child { border-right: 0; }
.movielens-stat dd { margin: 0; font: 500 25px/1.05 var(--font-display); }
.movielens-stat dt { max-width: 15ch; margin-top: 4px; color: var(--text-muted); font: 13px/1.25 var(--font-body); }
.movielens-context { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 12px; color: var(--text-secondary); font: 12px/1.3 var(--font-mono); }
.movielens-link { display: block; width: fit-content; margin-top: 8px; color: var(--text-accent); font: 12px/1.3 var(--font-mono); text-decoration: underline; text-underline-offset: 3px; }
.movielens-considerations { display: grid; gap: 0; border-top: 1px solid var(--line); }
.movielens-consideration { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 2fr); gap: 30px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.movielens-consideration:last-child { border-bottom: 0; }
.movielens-consideration h3 { margin: 0; font-size: 17px; line-height: 1.12; }
.movielens-consideration-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.movielens-consideration-points li { position: relative; padding-left: 14px; color: var(--text-secondary); font: 13px/1.3 var(--font-body); }
.movielens-consideration-points li::before { content: ""; position: absolute; top: .55em; left: 0; width: 5px; height: 5px; background: var(--text-accent); border-radius: 50%; }
/* Retain compact spacing when the deck shares a short window with controls. */
@container (max-height: 480px) {
  .movielens-rationale { gap: 10px; margin-top: 12px; }
  .movielens-poster-row { margin-top: 8px; }
  .movielens-dataset { padding-top: 10px; }
  .movielens-stats { margin-top: 8px; }
  .movielens-context { margin-top: 8px; }
  .movielens-link { margin-top: 5px; }
  .movielens-consideration { padding-block: 7px; }
}
.section-layout { display: block; }
.section-heading { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 28px; }
.section-kicker { margin-bottom: 32px; }
.slide-section-placeholder .section-heading h2 { max-width: 24ch; font-size: 52px; }
.section-number { font-size: 104px; }
.section-agenda { margin: 36px 0 0 173px; max-width: 720px; }
.section-agenda-row { padding: 14px 0; gap: 10px; }
.section-agenda-title { font-size: 22px; }
.sasrec-svg-host { min-height: 0; }
.slide-sasrec .sasrec-canvas { margin-top: 18px; }
.sasrec-canvas:has(.sasrec-equation) .sasrec-svg-host { height: calc(100% - 48px); }
.sasrec-equation { max-width: 95%; white-space: normal; }

/* Card sizes follow the available lane height. A separate footer row is
   reserved even in preview/development, so captions cannot be covered. */
.slide-playground .playground-host { height: auto; min-height: 0; }
.slide-playground .sasrec-playground {
  grid-template-columns: minmax(200px, 25%) minmax(0, 1fr);
  grid-template-rows: minmax(0, .92fr) minmax(0, 1fr) auto;
  gap: 10px 26px;
  padding-top: 10px;
}
.slide-playground .sasrec-search { grid-row: 1 / 3; }
.slide-playground .sasrec-history { grid-row: 1; }
.slide-playground .sasrec-recommendations { grid-row: 2; }
.slide-playground .sasrec-toolbar { flex: 1; }
.slide-playground .sasrec-playground-footer {
  position: relative; inset: auto; grid-column: 1 / -1; grid-row: 3;
  height: auto; min-height: 24px; padding-top: 4px;
  align-items: center; flex-wrap: wrap; gap: 6px 12px;
}
.slide-playground .sasrec-denserec-note { order: 1; flex-basis: 100%; }
.slide-playground .sasrec-strip { container-type: size; padding-bottom: 10px; }
.slide-playground .sasrec-history-card,
.slide-playground .sasrec-recommendation-card {
  width: min(164px, calc((100cqh - 35px) * 2 / 3));
  flex: 0 0 min(164px, calc((100cqh - 35px) * 2 / 3));
}
.slide-playground .sasrec-history .sasrec-strip::after {
  width: min(164px, calc((100cqh - 35px) * 2 / 3));
  flex-basis: min(164px, calc((100cqh - 35px) * 2 / 3));
  height: min(246px, calc(100cqh - 35px));
}
.slide-playground .sasrec-history:has(.sasrec-warm-proxy) .sasrec-history-card,
.slide-playground .sasrec-history:has(.sasrec-warm-proxy) .sasrec-strip::after {
  width: min(164px, calc((100cqh - 50px) * 2 / 3));
  flex-basis: min(164px, calc((100cqh - 50px) * 2 / 3));
}
.slide-playground .sasrec-history:has(.sasrec-warm-proxy) .sasrec-strip::after {
  height: min(246px, calc(100cqh - 50px));
}
.slide-playground .sasrec-lane-heading { margin-bottom: 6px; }
.slide-playground .sasrec-search > label:first-child { margin-bottom: 6px; }
.slide-playground .sasrec-movie-title { font-size: 15px; }
.slide-playground .sasrec-year { font-size: 11px; }
.slide-playground .sasrec-recommendations .sasrec-strip { gap: 14px; }
.slide-playground .sasrec-search > input { font-size: 14px; }
@media print {
  .slide-playground .sasrec-playground { grid-template-columns: 1fr; grid-template-rows: minmax(0, .78fr) minmax(0, 1fr); }
  .slide-playground .sasrec-history { grid-row: 1; grid-column: 1; }
  .slide-playground .sasrec-recommendations { grid-row: 2; grid-column: 1; }
}