/* Give the story and embedded Mate pages more room without scaling their UI. */
#workflow.ms-scene-products {
  --ms-narrative-height: 560px;
  --ms-product-height: 560px;
  --ms-photo-mask: #000;
  --ms-photo-feather:
    transparent 0%,
    transparent 3%,
    color-mix(in srgb, var(--ms-photo-mask) 4%, transparent) 6%,
    color-mix(in srgb, var(--ms-photo-mask) 16%, transparent) 9%,
    color-mix(in srgb, var(--ms-photo-mask) 40%, transparent) 12%,
    color-mix(in srgb, var(--ms-photo-mask) 68%, transparent) 16%,
    color-mix(in srgb, var(--ms-photo-mask) 90%, transparent) 20%,
    var(--ms-photo-mask) 26%,
    var(--ms-photo-mask) 74%,
    color-mix(in srgb, var(--ms-photo-mask) 90%, transparent) 80%,
    color-mix(in srgb, var(--ms-photo-mask) 68%, transparent) 84%,
    color-mix(in srgb, var(--ms-photo-mask) 40%, transparent) 88%,
    color-mix(in srgb, var(--ms-photo-mask) 16%, transparent) 91%,
    color-mix(in srgb, var(--ms-photo-mask) 4%, transparent) 94%,
    transparent 97%,
    transparent 100%;
}

#workflow.ms-scene-products > .section-wrap {
  width: min(1320px, calc(100% - 80px));
}

#workflow.ms-scene-products .ms-narrative-scene {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

/* Blend photographs into the shared story surface without cropping people. */
#workflow.ms-scene-products .mate-visual {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

#workflow.ms-scene-products .ms-scene-art {
  grid-template-rows: minmax(0, 1fr) auto;
  padding: 0;
  gap: 0;
}

#workflow.ms-scene-products .ms-scene-art > img.ms-character-canvas {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  mask-image:
    linear-gradient(to right, var(--ms-photo-feather)),
    linear-gradient(to bottom, var(--ms-photo-feather));
  mask-composite: intersect;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

#workflow.ms-scene-products .ms-scene-roles {
  padding-inline: 10%;
}

#workflow.ms-scene-products .ms-scene-art > svg {
  max-width: 480px;
  max-height: 400px;
}

#workflow.ms-scene-products .ms-scene-product .ms-device-phone {
  width: min(304px, 100%);
}

@media (max-width: 1050px) and (min-width: 761px) {
  #workflow.ms-scene-products > .section-wrap {
    width: calc(100% - 64px);
  }

  #workflow.ms-scene-products .ms-narrative-scene {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
  }

  #workflow.ms-scene-products .mate-visual {
    padding: 0;
  }

  #workflow.ms-scene-products {
    --ms-narrative-height: 480px;
  }
}

@media (max-width: 760px) {
  #workflow.ms-scene-products {
    --ms-narrative-height: 776px;
    --ms-product-height: 520px;
  }

  #workflow.ms-scene-products > .section-wrap {
    width: calc(100% - 40px);
  }

  #workflow.ms-scene-products .ms-narrative-scene {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 520px;
    gap: 20px;
  }

  #workflow.ms-scene-products .mate-scene.ms-narrative-scene {
    height: auto;
  }

  #workflow.ms-scene-products .mate-visual {
    padding: 0;
    border-radius: 0;
  }

  #workflow.ms-scene-products .ms-scene-art {
    width: min(440px, 100%);
    height: auto;
    justify-self: center;
  }

  #workflow.ms-scene-products .ms-scene-art > svg {
    max-width: 280px;
    max-height: 210px;
  }

  #workflow.ms-scene-products .ms-scene-product .ms-device-phone {
    width: min(284px, 100%);
  }

  #workflow.ms-scene-products .ms-scene-product .ms-device-desktop .ms-page-image {
    height: 160px;
  }

  #workflow.ms-scene-products .ms-scene-product .ms-device-desktop .ms-ai-output {
    height: calc(var(--ms-product-height) - 160px);
  }

  /* Keep three-line translated beat labels from changing the frame height. */
  #workflow.ms-scene-products .mate-beats {
    min-height: 80px;
  }

  /* Reserve the longest handoff caption so act changes do not move the frame. */
  #workflow.ms-scene-products .ms-handoff #mate-relay-caption {
    min-height: 4.95em;
  }
}

/* Scene selection and playback share one compact row. */
#workflow.ms-screen-story .flow-story .approval-label {
  display: none;
}

#workflow.ms-screen-story .mate-story-toolbar {
  justify-content: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 20px;
}

#workflow.ms-screen-story .workflow-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

#workflow.ms-screen-story .workflow-controls button[data-flow] {
  min-height: 40px;
  padding: 8px 14px;
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
}

#workflow.ms-screen-story .workflow-controls button[data-flow][aria-selected="true"] {
  background: var(--pale-blue);
  border-color: transparent;
  color: var(--blue);
}

#workflow.ms-screen-story .workflow-controls .mate-act-number,
#workflow.ms-screen-story .workflow-controls button::after {
  display: none;
}

#workflow.ms-screen-story #mate-story-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--blue);
}

#workflow.ms-screen-story #mate-story-play:hover {
  background: var(--pale-blue);
}

#workflow.ms-screen-story #mate-story-play svg {
  width: 16px;
  height: 16px;
}

#workflow.ms-screen-story #mate-story-play svg[hidden],
#workflow.ms-screen-story #mate-story-play span {
  display: none;
}

#workflow.ms-screen-story .mate-story-toolbar button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  #workflow.ms-screen-story .workflow-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #workflow.ms-screen-story .workflow-controls button[data-flow] {
    min-height: 44px;
    padding: 8px 10px;
    font-size: 12px;
  }

  #workflow.ms-screen-story #mate-story-play {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
}