/* Real Mate surfaces carry the patient story; AI output stays in each page. */
#workflow.ms-screen-story {
  --ms-blue: #0966d8;
  --ms-ink: #162c49;
  --ms-muted: #52667e;
  --ms-scene-height: 540px;
  overflow-anchor: none;
}

#workflow.ms-screen-story [hidden] {
  display: none !important;
}

#workflow.ms-screen-story .workflow-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
  border: 0;
}

#workflow.ms-screen-story .workflow-controls button[data-flow] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 9px 14px;
  border: 1px solid #dce6f1;
  border-radius: 999px;
  background: white;
  color: #56708b;
  font-size: .9375rem;
  line-height: 1.45;
  text-align: center;
}

#workflow.ms-screen-story .workflow-controls .mate-act-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: inherit;
  font-size: .8125rem;
  line-height: 1;
}

#workflow.ms-screen-story .workflow-controls strong {
  font-weight: 500;
  line-height: 1.45;
}

#workflow.ms-screen-story .workflow-controls .mate-act-role {
  display: none;
}

#workflow.ms-screen-story .workflow-controls button[data-flow][aria-selected="true"] {
  border-color: #a9c8f0;
  background: #edf5ff;
  color: #0757b6;
}

#workflow.ms-screen-story .mate-stage.flow-detail {
  display: block;
  width: 100%;
  min-height: 0;
  margin-top: 22px;
}

#workflow.ms-screen-story .flow-story {
  display: block;
  width: 100%;
  margin: 0 0 16px;
  text-align: center;
}

#workflow.ms-screen-story .flow-story > .flow-role,
#workflow.ms-screen-story .flow-story > #flow-description,
#workflow.ms-screen-story .flow-story > .flow-handoff {
  display: none;
}

#workflow.ms-screen-story .flow-story h3 {
  max-width: none;
  margin: 0;
  color: var(--ms-ink);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.025em;
  text-wrap: balance;
}

#workflow.ms-screen-story .flow-story .approval-label {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
  margin: 6px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #526981;
  font-size: .875rem;
  line-height: 1.6;
}

#workflow.ms-screen-story .mate-visual {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 18px 24px 16px;
  border: 1px solid #e0e8f2;
  border-radius: 12px;
  background: white;
  box-shadow: none;
  overflow: hidden;
}

#workflow.ms-screen-story .mate-visual > .mate-relay {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
  padding: 4px;
  border: 1px solid #dce6f0;
  border-radius: 999px;
  background: white;
  direction: inherit;
}

#workflow.ms-screen-story .mate-visual .mate-relay-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 9px 17px;
  border: 0;
  border-radius: 999px;
  color: #58718d;
  background: transparent;
  opacity: 1;
  transition: color .16s ease, background .16s ease;
}

#workflow.ms-screen-story .mate-visual .mate-relay-node.is-involved {
  border: 0;
  background: transparent;
  opacity: 1;
}

#workflow.ms-screen-story .mate-visual .mate-relay-node.is-active {
  color: #0757b6;
  background: #edf5ff;
}

#workflow.ms-screen-story .mate-visual .mate-relay-node svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin: 0;
  color: currentColor;
}

#workflow.ms-screen-story .mate-visual .mate-relay-node strong {
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

#workflow.ms-screen-story .mate-visual .mate-relay-node small,
#workflow.ms-screen-story .mate-visual .mate-relay-path {
  display: none;
}

#workflow.ms-screen-story .mate-scene.ms-screen-scene {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--ms-scene-height);
  min-height: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  background: white;
}

#workflow.ms-screen-story .ms-device {
  display: block;
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #dfe7f0;
  border-radius: 9px;
  background: white;
  box-shadow: none;
  overflow: hidden;
}

#workflow.ms-screen-story .ms-device-phone {
  width: min(286px, 100%);
  aspect-ratio: 720 / 1306;
  border-radius: 12px;
}

#workflow.ms-screen-story .ms-device-clin {
  width: min(740px, 100%);
  aspect-ratio: 1156 / 812;
}

#workflow.ms-screen-story .ms-device-work {
  width: min(878px, 100%);
  aspect-ratio: 1280 / 758;
}

#workflow.ms-screen-story .ms-page-image {
  display: block;
  position: static;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  background: white;
  box-shadow: none;
}

#workflow.ms-screen-story .ms-ai-output {
  position: absolute;
  top: 18%;
  bottom: 12%;
  left: 17%;
  right: 6%;
  min-width: 0;
  margin: 0;
  padding: 17px 18px;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: rgba(255, 255, 255, .985);
  color: var(--ms-ink);
  font-size: .9375rem;
  line-height: 1.6;
  text-align: start;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c8d8ec transparent;
}

#workflow.ms-screen-story .ms-device-work .ms-ai-output {
  top: 15%;
  bottom: 12%;
  left: 25%;
  right: 5%;
}

#workflow.ms-screen-story .ms-device-phone .ms-ai-output {
  top: 23%;
  bottom: 14%;
  left: 6%;
  right: 6%;
  padding: 11px 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .985);
}

#workflow.ms-screen-story .ms-output-heading {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
}

#workflow.ms-screen-story .ms-output-heading > strong {
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  overflow-wrap: anywhere;
}

#workflow.ms-screen-story .ms-ai-mark,
#workflow.ms-screen-story .ms-ai-mark svg {
  display: block;
  width: 18px;
  height: 18px;
  color: var(--ms-blue);
}

#workflow.ms-screen-story .ms-output-tag {
  color: #6a7f97;
  font-size: .6875rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}

#workflow.ms-screen-story .ms-output-input {
  margin: 9px 0 0;
  color: #61768e;
  font-size: .875rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

#workflow.ms-screen-story .ms-output-lines {
  margin: 12px 0 0;
  padding: 0;
  font-size: .9375rem;
  line-height: 1.6;
}

#workflow.ms-screen-story .ms-output-line {
  display: block;
  margin: 0;
  padding-block: 9px;
  padding-inline: 9px 0;
  border-top: 1px solid #e5edf6;
  border-inline-start: 2px solid transparent;
  opacity: 1;
  visibility: visible;
  overflow-wrap: anywhere;
}

#workflow.ms-screen-story .ms-output-line dt,
#workflow.ms-screen-story .ms-output-line dd {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
}

#workflow.ms-screen-story .ms-output-line dt {
  margin-inline-end: 8px;
  color: #245b9a;
  font-weight: 500;
}

#workflow.ms-screen-story .ms-output-line dd {
  color: #29435f;
}

#workflow.ms-screen-story .ms-output-status {
  min-height: 1.65em;
  margin: 11px 0 0;
  padding-top: 8px;
  border-top: 1px solid #dfe8f3;
  color: #526b86;
  font-size: .875rem;
  line-height: 1.65;
  opacity: 1;
  visibility: visible;
  overflow-wrap: anywhere;
}

#workflow.ms-screen-story .ms-device-phone .ms-output-heading,
#workflow.ms-screen-story .ms-device-phone .ms-output-lines {
  font-size: .84375rem;
  line-height: 1.55;
}

#workflow.ms-screen-story .ms-device-phone .ms-output-heading {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 4px 6px;
}

#workflow.ms-screen-story .ms-device-phone .ms-output-tag {
  grid-column: 2;
  font-size: .6875rem;
  line-height: 1.4;
}

#workflow.ms-screen-story .ms-device-phone .ms-output-input,
#workflow.ms-screen-story .ms-device-phone .ms-output-status {
  font-size: .84375rem;
  line-height: 1.55;
}

#workflow.ms-screen-story .ms-device-phone .ms-output-input {
  margin-top: 7px;
}

#workflow.ms-screen-story .ms-device-phone .ms-output-lines {
  margin-top: 8px;
}

#workflow.ms-screen-story .ms-device-phone .ms-output-line {
  padding-block: 7px;
  padding-inline-start: 6px;
}

#workflow.ms-screen-story .ms-device-phone .ms-output-status {
  margin-top: 8px;
  padding-top: 7px;
}

#workflow.ms-screen-story[data-motion="running"] .ms-output-line,
#workflow.ms-screen-story[data-motion="running"] .ms-output-status {
  transition: opacity .35s ease, border-color .35s ease;
}

#workflow.ms-screen-story[data-motion="running"][data-story-beat="0"] .ms-output-line[data-ms-step="1"],
#workflow.ms-screen-story[data-motion="running"][data-story-beat="0"] .ms-output-line[data-ms-step="2"],
#workflow.ms-screen-story[data-motion="running"][data-story-beat="1"] .ms-output-line[data-ms-step="2"],
#workflow.ms-screen-story[data-motion="running"][data-story-beat="0"] .ms-output-status,
#workflow.ms-screen-story[data-motion="running"][data-story-beat="1"] .ms-output-status {
  opacity: 0;
  visibility: hidden;
}

#workflow.ms-screen-story[data-motion="running"][data-story-beat="0"] .ms-output-line[data-ms-step="0"],
#workflow.ms-screen-story[data-motion="running"][data-story-beat="1"] .ms-output-line[data-ms-step="1"],
#workflow.ms-screen-story[data-motion="running"][data-story-beat="2"] .ms-output-line[data-ms-step="2"] {
  border-inline-start-color: #0966d8;
}

#workflow.ms-screen-story .mate-beats {
  gap: 10px;
  min-height: 48px;
  margin-top: 10px;
}

#workflow.ms-screen-story .mate-beat {
  padding: 8px 4px;
  font-size: .8125rem;
  line-height: 1.55;
}

#workflow.ms-screen-story .ms-handoff {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid #e4ebf5;
}

#workflow.ms-screen-story .ms-handoff #mate-relay-caption {
  max-width: 940px;
  min-height: 1.65em;
  margin: 0 auto;
  color: #536d89;
  font-size: .875rem;
  line-height: 1.65;
  text-align: center;
  overflow-wrap: anywhere;
}

#workflow.ms-screen-story button:focus-visible,
#workflow.ms-screen-story a:focus-visible {
  outline: 2px solid #0966d8;
  outline-offset: 3px;
}

#workflow.ms-screen-story .ms-ai-output:focus-visible {
  outline: 2px solid #0966d8;
  outline-offset: -2px;
}

@media (max-width: 1050px) {
  #workflow.ms-screen-story .mate-visual {
    padding-inline: 18px;
  }

  #workflow.ms-screen-story .ms-ai-output {
    padding: 13px 14px;
  }
}

@media (max-width: 760px) {
  #workflow.ms-screen-story {
    --ms-scene-height: 520px;
  }

  #workflow.ms-screen-story .workflow-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 16px;
  }

  #workflow.ms-screen-story .workflow-controls button[data-flow] {
    gap: 6px;
    min-height: 46px;
    padding: 8px 10px;
    font-size: .875rem;
  }

  #workflow.ms-screen-story .mate-stage.flow-detail {
    margin-top: 18px;
  }

  #workflow.ms-screen-story .flow-story {
    margin-bottom: 13px;
  }

  #workflow.ms-screen-story .flow-story h3 {
    min-height: 3em;
    font-size: 1.2rem;
    line-height: 1.5;
  }

  #workflow.ms-screen-story .flow-story .approval-label {
    font-size: .875rem;
    line-height: 1.6;
  }

  html[dir="rtl"] #workflow.ms-screen-story .flow-story h3 {
    min-height: 4.5em;
  }

  #workflow.ms-screen-story .flow-story .approval-label {
    min-height: 3.2em;
  }

  #workflow.ms-screen-story .mate-visual {
    padding: 12px 10px 13px;
    border-radius: 10px;
  }

  #workflow.ms-screen-story .mate-visual > .mate-relay {
    gap: 2px;
    padding: 3px;
    margin-bottom: 10px;
  }

  #workflow.ms-screen-story .mate-visual .mate-relay-node {
    gap: 5px;
    min-height: 44px;
    padding: 8px 7px;
  }

  #workflow.ms-screen-story .mate-visual .mate-relay-node svg {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  #workflow.ms-screen-story .mate-visual .mate-relay-node strong {
    font-size: .8125rem;
  }

  #workflow.ms-screen-story .ms-device-phone {
    width: min(276px, 100%);
  }

  #workflow.ms-screen-story .ms-device-desktop {
    width: 100%;
    height: var(--ms-scene-height);
    max-height: var(--ms-scene-height);
    aspect-ratio: auto;
    border-radius: 7px;
  }

  #workflow.ms-screen-story .ms-device-desktop .ms-page-image {
    width: 100%;
    height: 168px;
    object-fit: contain;
    border-bottom: 1px solid #e2eaf4;
  }

  #workflow.ms-screen-story .ms-device-desktop .ms-ai-output {
    position: static;
    inset: auto;
    width: 100%;
    height: calc(var(--ms-scene-height) - 168px);
    margin: 0;
    padding: 12px 13px;
    border: 0;
    border-radius: 0;
    background: white;
    font-size: .875rem;
  }

  #workflow.ms-screen-story .ms-output-heading,
  #workflow.ms-screen-story .ms-output-lines,
  #workflow.ms-screen-story .ms-output-input,
  #workflow.ms-screen-story .ms-output-status {
    font-size: .875rem;
    line-height: 1.6;
  }

  #workflow.ms-screen-story .ms-output-heading {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 4px 7px;
  }

  #workflow.ms-screen-story .ms-output-heading .ms-output-tag {
    grid-column: 2;
  }

  #workflow.ms-screen-story .mate-beats {
    gap: 5px;
    margin-top: 10px;
    min-height: 50px;
  }

  #workflow.ms-screen-story .mate-beat {
    padding: 7px 2px;
    font-size: .8125rem;
    line-height: 1.55;
  }

  #workflow.ms-screen-story .ms-handoff {
    margin-top: 5px;
  }

  #workflow.ms-screen-story .ms-handoff #mate-relay-caption {
    font-size: .8125rem;
    line-height: 1.65;
  }
}

@media (max-width: 360px) {
  #workflow.ms-screen-story .mate-visual {
    padding-inline: 7px;
  }

  #workflow.ms-screen-story .mate-visual .mate-relay-node {
    gap: 4px;
    padding-inline: 5px;
  }

  #workflow.ms-screen-story .mate-visual .mate-relay-node svg {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  #workflow.ms-screen-story .mate-visual .mate-relay-node strong {
    font-size: .75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #workflow.ms-screen-story .ms-output-line,
  #workflow.ms-screen-story .ms-output-status {
    visibility: visible !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }

  #workflow.ms-screen-story .mate-relay-node {
    transition: none !important;
  }
}