.ipms-media-zoom {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem;
  color:#fff
}
.ipms-media-zoom button {
  min-height:2.65rem!important;
  padding:.55rem .8rem!important;
  border:1px solid rgba(255,255,255,.52)!important;
  background:transparent!important;
  color:#fff!important;
  font:700 .75rem "DM Sans",sans-serif!important;
  cursor:pointer
}
.ipms-media-zoom button:hover {
  background:#f2b84b!important;
  color:#101b33!important;
  border-color:#f2b84b!important
}
.ipms-slide-step-controls {
  display:flex;
  align-items:center;
  gap:.35rem
}
.ipms-slide-step-controls button {
  min-height:2.75rem;
  padding:.55rem .9rem;
  border:1px solid rgba(255,255,255,.45);
  background:transparent;
  color:#fff;
  font:800 .75rem "DM Sans",sans-serif;
  cursor:pointer
}
.ipms-slide-step-controls button:hover,
.ipms-slide-step-controls button:focus-visible {
  border-color:#f2b84b;
  background:#f2b84b;
  color:#101b33;
  outline:none
}
.review-slide.ipms-is-zoomed,.meeting-viewer-stage.ipms-is-zoomed {
  display:block!important;
  height:78vh;
  overflow:auto!important;
  text-align:center;
  cursor:grab;
  touch-action:none;
  user-select:none
}
.review-slide.ipms-is-dragging,.meeting-viewer-stage.ipms-is-dragging {
  cursor:grabbing
}
.review-slide.ipms-is-zoomed img,.meeting-viewer-stage.ipms-is-zoomed img {
  height:auto!important;
  pointer-events:none
}
.review-slide.ipms-is-zoomed figcaption {
  position:sticky;
  left:0
}
.meeting-viewer-controls .ipms-media-zoom {
  margin:0 1rem;
  color:#101b33
}
/*
 * Meeting galleries place their controls on a light cream band. Override the
 * white-on-black review styling here so the zoom controls read
 * as clearly as the neighboring Previous, Play, and Next controls.
 */
.meeting-viewer-controls .ipms-media-zoom button {
  border-color:#101b33!important;
  background:transparent!important;
  color:#101b33!important
}
.meeting-viewer-controls .ipms-media-zoom button:hover,
.meeting-viewer-controls .ipms-media-zoom button:focus-visible {
  border-color:#101b33!important;
  background:#101b33!important;
  color:#fff!important
}
@media(max-width:760px) {
  .review-slide-controls {
    flex-wrap:wrap;
    gap:.75rem
  }

  /*
   * On narrow screens, give each family of meeting controls its own row.
   * The gallery's desktop control bar is a three-column grid; simply allowing
   * it to wrap made the injected zoom controls compete for those columns and
   * appear piled on top of one another.
   */
  .meeting-viewer-controls {
    display:flex!important;
    flex-direction:column;
    align-items:stretch;
    gap:.75rem!important;
    padding:1rem!important
  }

  .meeting-viewer-controls > div {
    width:100%;
    margin:0!important;
    justify-content:center
  }

  /* Minus, clickable percentage reset, and plus share one even row. */
  .ipms-media-zoom {
    /* !important overrides the meeting gallery's more-specific generic
     * “every direct div is flex” rule. */
    display:grid!important;
    grid-template-columns:minmax(2.75rem,1fr) minmax(3.5rem,auto) minmax(2.75rem,1fr);
    order:5;
    width:100%;
    max-width:25rem;
    margin-inline:auto!important;
    gap:0
  }

  .ipms-media-zoom button {
    width:100%;
    min-width:0!important
  }

  .ipms-slide-step-controls {
    width:100%;
    justify-content:center
  }

  .ipms-slide-step-controls button {
    flex:1 1 0
  }

}
.ipms-media-zoom [data-media-status] {
  min-width:3.1rem;
  min-height:2.65rem;
  padding:.55rem .65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.52);
  text-align:center;
  font-size:.7rem;
  font-weight:800
}
.review-slide.is-active,.meeting-viewer-stage {
  height:clamp(32rem,82vh,60rem)!important;
  min-height:0!important;
  max-height:60rem!important;
  overflow:hidden!important
}
.review-slide.is-active {
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
  justify-items:center
}
.meeting-viewer-stage {
  aspect-ratio:auto!important
}
.review-slide.is-active img,.meeting-viewer-stage img {
  object-fit:contain
}
.review-slide.ipms-is-zoomed,.meeting-viewer-stage.ipms-is-zoomed {
  height:clamp(32rem,82vh,60rem)!important;
  max-height:60rem!important;
  overflow:auto!important
}
@media(max-width:760px) {
  .review-slide.is-active,.meeting-viewer-stage,.review-slide.ipms-is-zoomed,.meeting-viewer-stage.ipms-is-zoomed {
    height:60vh!important;
    min-height:22rem!important;
    max-height:38rem!important
  }
}

/* Automatic playback shared by meetings, reviews, projects, and tips. */
.ipms-autoplay-controls {
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#fff
}
.ipms-autoplay-controls button,
.ipms-autoplay-controls select {
  min-height:2.65rem!important;
  padding:.55rem .8rem!important;
  border:1px solid rgba(255,255,255,.52)!important;
  background:transparent!important;
  color:#fff!important;
  font:700 .75rem "DM Sans",sans-serif!important
}
.ipms-autoplay-controls button { cursor:pointer }
.ipms-autoplay-controls select option {
  background:#101b33;
  color:#fff
}
.ipms-autoplay-controls label {
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.7rem;
  font-weight:800
}
.ipms-autoplay-controls button:hover,
.ipms-autoplay-controls button:focus-visible {
  border-color:#f2b84b!important;
  background:#f2b84b!important;
  color:#101b33!important
}

/* Make it unmistakable that an illustrated article continues below. */
.ipms-story-cue {
  padding:1.25rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  border-left:7px solid #f2b84b;
  background:#eef2f6;
  color:#101b33
}
.ipms-story-cue div { display:grid; gap:.25rem }
.ipms-story-cue strong { font:700 1.15rem "DM Sans",sans-serif }
.ipms-story-cue span { color:#536075; font-size:.85rem }
.ipms-story-cue a {
  flex:0 0 auto;
  padding:.75rem 1rem;
  border:1px solid #101b33;
  color:#101b33;
  font-size:.75rem;
  font-weight:800
}
.ipms-story-cue a:hover,
.ipms-story-cue a:focus-visible { background:#101b33; color:#fff }

.review-slide.is-active img,
.meeting-viewer-stage img { cursor:zoom-in }
.review-slide.ipms-is-zoomed img,
.meeting-viewer-stage.ipms-is-zoomed img { cursor:grab }

/* Meeting controls sit on cream instead of the dark article control bar. */
.meeting-viewer-controls .ipms-autoplay-controls { color:#101b33 }
.meeting-viewer-controls .ipms-autoplay-controls button,
.meeting-viewer-controls .ipms-autoplay-controls select {
  border-color:#101b33!important;
  color:#101b33!important
}
.meeting-viewer-controls .ipms-autoplay-controls select option {
  background:#fff;
  color:#101b33
}
.meeting-viewer-controls .ipms-autoplay-controls button:hover,
.meeting-viewer-controls .ipms-autoplay-controls button:focus-visible {
  background:#101b33!important;
  color:#fff!important
}

/*
 * Keep all meeting controls in one intentionally spaced band. The original
 * three-column grid was designed before Play/Speed and Zoom were added, which
 * allowed the new controls to crowd the photograph or land on uneven rows.
 */
.meeting-viewer-controls {
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  gap:.8rem 1rem!important;
  min-height:4.75rem;
  padding:.75rem 0
}
.meeting-viewer-controls > div:first-child {
  flex:0 0 auto
}
.meeting-viewer-controls > p {
  flex:1 1 13rem;
  margin:0
}
.meeting-viewer-controls .ipms-autoplay-controls,
.meeting-viewer-controls .ipms-media-zoom {
  flex:0 0 auto;
  align-self:center;
  margin:0!important
}
.meeting-viewer-controls .ipms-media-zoom [data-media-status] {
  border-color:#101b33
}

@media(max-width:760px) {
  .meeting-viewer-controls {
    flex-direction:column;
    align-items:stretch;
    padding:1rem!important
  }
  .meeting-viewer-controls > p {
    flex:0 0 auto;
    text-align:center
  }
  .meeting-viewer-controls .ipms-autoplay-controls,
  .meeting-viewer-controls .ipms-media-zoom {
    width:100%;
    align-self:stretch
  }
  .ipms-autoplay-controls {
    width:100%;
    justify-content:center;
    flex-wrap:wrap
  }
  .ipms-story-cue { align-items:flex-start; flex-direction:column }
}