/* Product views: local pictures of the assistant and the setup work, with example data.
   Loaded after v3.css on the routes that use them, so these rules win by order. Depth is a tonal
   edge fade into the page (DESIGN.md: flat interface, no shadows or glows). Motion is staged once
   when a view scrolls into place; every state below ends in the complete, static picture. */
.pm {
  position: relative;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
}
.pm-frame {
  position: relative;
  isolation: isolate;
}
.pm-window {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-rule-strong);
  border-top-color: #55555d;
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-body);
  font: 400 13px/1.45 var(--font-body);
  text-align: left;
}
.pm-window strong,
.pm-window b {
  color: var(--color-ink);
  font-weight: 600;
}
.pm-window :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm-glyph {
  width: 15px;
  height: 15px;
  flex: none;
}

/* The bottom edge dissolves into the page instead of ending in a hard line. */
.pm[data-fade~='bottom'] .pm-frame::after {
  content: '';
  position: absolute;
  inset: auto -1px -1px;
  height: 128px;
  background: linear-gradient(to bottom, rgb(10 10 11 / 0), var(--color-paper) 86%);
  pointer-events: none;
}

/* Shared atoms */
.pm-prompt {
  justify-self: end;
  max-width: 100%;
  padding: 8px 13px;
  border: 1px solid var(--color-rule);
  border-radius: 12px 12px 4px 12px;
  background: var(--color-surface-raised);
  color: var(--color-ink);
}
.pm-type {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  vertical-align: bottom;
}
.pm-text {
  color: var(--color-body);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
}
.pm-s {
  display: inline;
}
.pm-gap {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgb(223 189 135 / 0.14);
  color: var(--color-warning);
  white-space: nowrap;
}
/* On the narrowest phones a long marked phrase may wrap, each line keeping its own highlight, so it
   never pushes the message past the window. */
@media (max-width: 359px) {
  .pm-gap {
    white-space: normal;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}
.pm-reply {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.pm-avatar {
  display: grid;
  width: 26px;
  height: 26px;
  flex: none;
  place-items: center;
  border: 1px solid var(--color-rule-strong);
  border-radius: 50%;
  background: var(--color-paper);
}
.pm-avatar .pm-mark {
  width: 12px;
  height: 12px;
  grid-template-columns: repeat(3, 3px);
  grid-template-rows: repeat(3, 3px);
  gap: 1.5px;
}
.pm-reply-body {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 12px;
  justify-items: start;
  padding-top: 2px;
}
.pm-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}
.pm-file {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: var(--color-surface-raised);
  color: var(--color-body);
  font: 400 11.5px/1.4 var(--font-mono);
}
/* A long file name wraps inside its chip rather than widening the message. */
.pm-file > :not(.pm-ftype, .pm-fpage) {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pm-ftype {
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.pm-fpage {
  color: var(--color-muted);
  white-space: nowrap;
}

/* Assistant window */
.pm-assistant .pm-window {
  display: flex;
  min-height: 560px;
}
.pm-side {
  display: flex;
  flex: 0 0 216px;
  flex-direction: column;
  gap: 20px;
  padding: 18px 12px 16px;
  border-right: 1px solid var(--color-rule);
  background: var(--color-paper);
}
.pm-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 6px;
  color: var(--color-ink);
  font-size: 15px;
  letter-spacing: -0.02em;
}
.pm-mark {
  width: 18px;
  height: 18px;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows: repeat(3, 4px);
  gap: 3px;
}
.pm-nav,
.pm-tasks {
  display: grid;
  gap: 2px;
}
.pm-nav li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--color-body);
}
.pm-side-label {
  padding: 0 8px;
  color: var(--color-muted);
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pm-tasks li {
  padding: 7px 8px;
  overflow: hidden;
  border-radius: 6px;
  color: var(--color-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-tasks .pm-task-active {
  background: var(--color-surface-raised);
  color: var(--color-ink);
}
.pm-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 20px;
  padding: 20px 32px 132px;
}
.pm-title {
  color: var(--color-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pm-thread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 760px;
  gap: 26px;
  margin-inline: auto;
}
.pm-exchange {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  justify-items: start;
}
.pm-composer {
  width: 100%;
  max-width: 760px;
  margin: auto;
  margin-bottom: 0;
}
.pm-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 9px 9px 14px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 999px;
  background: var(--color-paper);
  color: var(--color-muted);
}
.pm-send {
  display: grid;
  width: 26px;
  height: 26px;
  margin-left: auto;
  place-items: center;
  border-radius: 50%;
  background: var(--color-rule-strong);
  color: var(--color-body);
}
.pm-send .pm-glyph {
  width: 14px;
  height: 14px;
}
.pm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.pm-chips span {
  padding: 4px 11px;
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  color: var(--color-body);
  font-size: 12px;
}

/* Task views */
.pm-case .pm-window {
  min-height: 0;
}
.pm-case-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  justify-items: start;
  padding: 18px 18px 20px;
}
.pm-case-body > .pm-step {
  max-width: 100%;
}
.pm-doc {
  width: 100%;
  padding: 10px 12px 12px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: var(--color-paper);
}
.pm-doc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: var(--color-muted);
  font: 400 11px/1.4 var(--font-mono);
}
.pm-doc-head .pm-glyph {
  width: 13px;
  height: 13px;
  color: var(--color-accent);
}
.pm-doc-line {
  height: 6px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--color-rule);
}
.pm-doc-line:last-child {
  width: 64%;
}
.pm-doc-hit {
  height: auto;
  padding: 5px 8px;
  border-left: 2px solid var(--color-accent);
  border-radius: 0 3px 3px 0;
  background: linear-gradient(rgb(74 163 255 / 0.2), rgb(74 163 255 / 0.2)) no-repeat 0 0 / 100%
    100%;
  color: var(--color-ink);
  font-size: 12px;
  line-height: 1.45;
}
/* One set of columns for the whole table: each row is a subgrid, so the labels always sit over
   their column, however long a cell is. The table is a container, so on a narrow window its
   labels tighten instead of pushing the message wider than the window (test plan, PRR-14). */
.pm-diff {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  column-gap: 10px;
  container: pm-diff / inline-size;
  width: 100%;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: var(--color-paper);
}
.pm-diff-row {
  display: grid;
  grid-column: 1 / -1;
  /* The first value is for browsers without subgrid: the same columns and gap, set per row. The
     gap equals the table's, so with subgrid nothing changes. */
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-columns: subgrid;
  column-gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--color-rule);
}
.pm-diff .pm-diff-row:first-child {
  border-top: 0;
}
.pm-diff-head {
  color: var(--color-muted);
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pm-diff-change span:last-child {
  color: var(--color-accent);
}
.pm-diff-gap {
  background: rgb(223 189 135 / 0.07);
}
.pm-diff-gap span:last-child {
  color: var(--color-warning);
}
/* After the label and row rules above, so a narrow table's tighter labels win. */
@container pm-diff (max-width: 259px) {
  .pm-diff-row {
    column-gap: 6px;
    padding-inline: 8px;
  }
  .pm-diff-head {
    font-size: 10px;
    letter-spacing: 0;
  }
}
/* Only on the narrowest phones (about 335 px and below). */
@container pm-diff (max-width: 229px) {
  .pm-diff-row {
    column-gap: 4px;
    padding-inline: 6px;
  }
  .pm-diff-head {
    font-size: 9px;
  }
}
.pm-page {
  display: grid;
  width: 100%;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: var(--color-surface-raised);
  color: var(--color-ink);
  font-size: 12.5px;
  line-height: 1.5;
}
.pm-page mark {
  padding: 0 5px;
  border-radius: 3px;
  background: rgb(223 189 135 / 0.18);
  color: var(--color-warning);
}
.pm-points {
  display: grid;
  width: 100%;
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  background: var(--color-paper);
}
.pm-points-head {
  padding: 8px 12px 6px;
  color: var(--color-muted);
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pm-point {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--color-rule);
  color: var(--color-ink);
  font-size: 12.5px;
  line-height: 1.45;
}
.pm-point::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: none;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}
.pm-point-open::before {
  background: var(--color-warning);
}

/* App view: a safety camera product screen built around one job. The camera shows generated example
   footage (a local clip and its poster) under drawn overlays. Overlay positions are percentages of
   the frame, so the picture scales as one piece; each tracked part holds its final keyframe here
   and product-mockups.js moves it only while the clip plays. */
.pm-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-paper);
}
.pm-bar .pm-brand {
  padding: 0;
  padding-right: 14px;
  border-right: 1px solid var(--color-rule);
}
.pm-bar-title {
  color: var(--color-ink);
  font-weight: 600;
  white-space: nowrap;
}
.pm-tabs {
  display: flex;
  gap: 2px;
}
.pm-tab {
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--color-muted);
  font-size: 12px;
}
.pm-tab-on {
  background: var(--color-surface-raised);
  color: var(--color-ink);
}
.pm-bar-note {
  margin-left: auto;
  color: var(--color-muted);
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pm-app {
  container: pm-app / inline-size;
}
.pm-app-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.pm-app-stage {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 14px 4px;
}
.pm-app-side {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 10px 14px 14px;
}
.pm-app-rail {
  padding: 14px 14px 118px;
  border-top: 1px solid var(--color-rule);
}
.pm-side-label {
  padding: 0 0 8px;
  color: var(--color-muted);
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pm-app-side > .pm-side-label {
  padding-bottom: 0;
}

/* The camera */
.pm-feed {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  border: 1px solid var(--color-rule-strong);
  border-radius: 6px;
  background: #0d0d10;
}
.pm-poster,
.pm-footage {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-footage {
  display: none;
}
.pm-feed[data-media='video'] .pm-footage {
  display: block;
}
.pm-feed[data-media='video'] .pm-poster {
  visibility: hidden;
}
.pm-feed::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgb(10 10 11 / 0.5), rgb(10 10 11 / 0) 24%);
  pointer-events: none;
}
.pm-zone {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pm-zone polygon {
  fill: rgb(223 189 135 / 0.09);
  stroke: rgb(223 189 135 / 0.9);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}
.pm-zone-hit polygon {
  fill: rgb(241 175 152 / 0.2);
  stroke: var(--color-error);
  stroke-dasharray: none;
}
.pm-zone-label {
  position: absolute;
  z-index: 3;
  bottom: 6%;
  left: 31%;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgb(10 10 11 / 0.66);
  color: var(--color-warning);
  font: 500 clamp(8px, 1.5cqw, 10.5px) / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pm-track {
  --arm: 9px;
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  background: color-mix(in srgb, currentColor 9%, transparent);
  pointer-events: none;
}
.pm-track::after {
  content: '';
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(currentColor, currentColor) left top / var(--arm) 2px no-repeat,
    linear-gradient(currentColor, currentColor) left top / 2px var(--arm) no-repeat,
    linear-gradient(currentColor, currentColor) right top / var(--arm) 2px no-repeat,
    linear-gradient(currentColor, currentColor) right top / 2px var(--arm) no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / var(--arm) 2px no-repeat,
    linear-gradient(currentColor, currentColor) left bottom / 2px var(--arm) no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / var(--arm) 2px no-repeat,
    linear-gradient(currentColor, currentColor) right bottom / 2px var(--arm) no-repeat;
}
.pm-track-forklift {
  top: 28.3%;
  left: 47.2%;
  width: 7.5%;
  height: 24.4%;
  color: var(--color-accent);
}
.pm-track-person {
  top: 53.3%;
  left: 47.5%;
  width: 5.9%;
  height: 28.2%;
  color: var(--color-error);
}
.pm-tag {
  position: absolute;
  bottom: calc(100% + 3px);
  left: -1px;
  display: flex;
  padding: 1px 6px;
  border-radius: 3px;
  background: currentColor;
  white-space: nowrap;
}
.pm-tag span {
  color: var(--color-paper);
  font: 600 clamp(8px, 1.5cqw, 10.5px) / 1.5 var(--font-body);
  letter-spacing: 0.03em;
}
.pm-osd {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgb(10 10 11 / 0.62);
  color: #f2f2f4;
  font: 500 clamp(8px, 1.55cqw, 11px) / 1.4 var(--font-mono);
  letter-spacing: 0.04em;
}
.pm-osd-id {
  top: 3.2%;
  left: 2.2%;
}
.pm-osd-id i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-error);
}
.pm-osd-id span {
  padding-left: 6px;
  border-left: 1px solid rgb(242 242 244 / 0.35);
}
.pm-osd-time {
  top: 3.2%;
  right: 2.2%;
}
.pm-osd-note {
  right: 2.2%;
  bottom: 3.2%;
  color: rgb(242 242 244 / 0.82);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pm-banner {
  position: absolute;
  z-index: 4;
  top: 12%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.35em 0.95em;
  border-radius: 999px;
  background: var(--color-error);
  color: #1c0e0a;
  font: 600 clamp(8px, 1.9cqw, 12.5px) / 1.2 var(--font-body);
  transform: translateX(-50%);
  white-space: nowrap;
}
.pm-banner .pm-glyph {
  width: 1.15em;
  height: 1.15em;
}
.pm-timeline {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-muted);
  font: 400 11px/1.4 var(--font-mono);
}
.pm-timeline-track {
  position: relative;
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-surface-raised);
}
.pm-timeline-fill {
  position: absolute;
  inset: 0;
  background: rgb(74 163 255 / 0.5);
  transform-origin: 0 50%;
}
.pm-timeline-event {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 35.7%;
  width: 3px;
  background: var(--color-warning);
}
.pm-timeline-head {
  position: absolute;
  inset: 0;
}
.pm-timeline-head::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-ink);
}

.pm-rule {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  background: var(--color-paper);
  color: var(--color-body);
  font-size: 12px;
  line-height: 1.45;
}
.pm-rule .pm-glyph {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}
.pm-rule > span {
  min-width: 0;
  flex: 1;
}
.pm-rule b {
  display: block;
  color: var(--color-ink);
  font-weight: 600;
}

/* Today's alerts */
.pm-rail-list {
  display: grid;
}
.pm-rail-row {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--color-rule);
}
.pm-rail-dot {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--color-positive);
}
.pm-rail-new .pm-rail-dot {
  background: var(--color-warning);
}
.pm-rail-main {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.pm-rail-main b {
  color: var(--color-ink);
  font-weight: 600;
}
.pm-rail-main > span {
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.4;
}
.pm-rail-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.pm-rail-foot time {
  color: var(--color-muted);
  font: 400 11px/1.4 var(--font-mono);
}
.pm-pill {
  padding: 1px 8px;
  border-radius: 999px;
  font: normal 500 10.5px/1.6 var(--font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pm-pill-ok {
  background: rgb(153 207 177 / 0.12);
  color: var(--color-positive);
}
.pm-pill-warn {
  background: rgb(223 189 135 / 0.14);
  color: var(--color-warning);
}

/* The agents and the decision */
.pm-agents {
  display: grid;
  gap: 10px;
}
.pm-agent {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  background: var(--color-paper);
}
.pm-agent:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 25px;
  width: 1px;
  height: 10px;
  background: var(--color-rule-strong);
}
.pm-agent-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 7px;
  background: var(--color-accent-tint);
  color: var(--color-accent);
}
.pm-agent-icon .pm-glyph {
  width: 16px;
  height: 16px;
}
.pm-agent-text {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.pm-agent-text b {
  color: var(--color-ink);
  font-weight: 600;
}
.pm-agent-text span {
  color: var(--color-body);
  font-size: 12px;
  line-height: 1.4;
}
.pm-agent-wait {
  border-color: rgb(74 163 255 / 0.35);
}
.pm-agent em {
  color: var(--color-accent);
  font: normal 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pm-dot {
  display: grid;
  width: 21px;
  height: 21px;
  flex: none;
  place-items: center;
  border: 1px solid rgb(153 207 177 / 0.6);
  border-radius: 50%;
  background: rgb(153 207 177 / 0.12);
  color: var(--color-positive);
}
.pm-dot .pm-glyph {
  width: 12px;
  height: 12px;
}
.pm-alert {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgb(241 175 152 / 0.35);
  border-radius: 8px;
  background: rgb(241 175 152 / 0.06);
}
.pm-alert-head {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-error);
}
.pm-alert-head b {
  color: var(--color-ink);
  font-weight: 600;
}
.pm-alert-head span:last-child {
  margin-left: auto;
  color: var(--color-muted);
  font: 400 11px/1.4 var(--font-mono);
}
.pm-alert-body {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.pm-snap {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-rule-strong);
  border-radius: 4px;
  object-fit: cover;
}
.pm-alert-text {
  color: var(--color-ink);
  font-size: 13px;
  line-height: 1.5;
}
.pm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.pm-actions em {
  margin-left: auto;
  color: var(--color-muted);
  font-style: normal;
}
.pm-button {
  padding: 7px 14px;
  border: 1px solid var(--color-rule-strong);
  border-radius: 6px;
  background: var(--color-surface-raised);
  color: var(--color-ink);
  font-weight: 500;
}
.pm-button-primary {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
}

/* The supplier checklist: a second setup example, text only. A new supplier's documents are listed
   with what was found and what is missing; the agents, the rule, the decision card and the rail of
   earlier work are the camera app's parts. */
.pm-pack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}
.pm-pack-head span {
  color: var(--color-muted);
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.04em;
}
.pm-checklist {
  display: grid;
  gap: 8px;
}
.pm-check-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 9px 12px;
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  background: var(--color-paper);
}
.pm-check-thumb {
  position: relative;
  display: grid;
  width: 30px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--color-rule-strong);
  border-radius: 3px;
  background: var(--color-surface-raised);
}
.pm-check-thumb::before {
  content: '';
  position: absolute;
  inset: 8px 5px auto;
  height: 14px;
  background:
    linear-gradient(var(--color-rule-strong), var(--color-rule-strong)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--color-rule-strong), var(--color-rule-strong)) 0 6px / 100% 2px no-repeat,
    linear-gradient(var(--color-rule-strong), var(--color-rule-strong)) 0 12px / 64% 2px no-repeat;
}
.pm-check-thumb .pm-dot {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 17px;
  height: 17px;
  background: linear-gradient(rgb(153 207 177 / 0.12), rgb(153 207 177 / 0.12)), var(--color-paper);
}
.pm-check-thumb .pm-dot .pm-glyph {
  width: 10px;
  height: 10px;
}
.pm-check-main {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.pm-check-main span {
  color: var(--color-muted);
  font: 400 11px/1.4 var(--font-mono);
  overflow-wrap: anywhere;
}
.pm-check-miss {
  border-color: rgb(223 189 135 / 0.4);
}
.pm-check-miss .pm-check-thumb {
  border-color: rgb(223 189 135 / 0.7);
  border-style: dashed;
  background: transparent;
  color: var(--color-warning);
}
.pm-check-miss .pm-check-thumb::before {
  display: none;
}
.pm-check-miss .pm-check-thumb .pm-glyph {
  width: 16px;
  height: 16px;
}
.pm-check-miss .pm-check-main span {
  color: var(--color-warning);
}
.pm-check-hit {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgb(223 189 135 / 0.1), rgb(223 189 135 / 0.1)) no-repeat 0 0 / 100%
    100%;
}
.pm-note {
  border-color: rgb(74 163 255 / 0.35);
  background: rgb(74 163 255 / 0.06);
}
.pm-note .pm-alert-head {
  color: var(--color-accent);
}

/* The energy, construction and manufacturing apps (test plan, Packet ECM) reuse the setup apps' bar,
   agents, decision card and rail. In the middle: a generated blade photo with drawn marks, a site
   plan drawn in SVG, or an order table. Marks only fade in (pm-overlay), so they never leave what they
   mark, and they are positioned in percent of the picture they sit on. */
.pm-photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  border: 1px solid var(--color-rule-strong);
  border-radius: 6px;
  background: #0d0d10;
}
.pm-photo-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, rgb(10 10 11 / 0.42), rgb(10 10 11 / 0) 24%);
  pointer-events: none;
}
.pm-area {
  position: absolute;
  z-index: 1;
  top: 41%;
  left: 27.5%;
  width: 42%;
  height: 29%;
  border: 1.5px dashed rgb(74 163 255 / 0.9);
  border-radius: 50%;
  background: rgb(74 163 255 / 0.08);
}
.pm-box {
  --arm: 7px;
  color: var(--color-warning);
}
.pm-box-a {
  top: 49.5%;
  left: 42.5%;
  width: 14%;
  height: 12.5%;
}
.pm-box-b {
  top: 57.5%;
  left: 56.8%;
  width: 10.5%;
  height: 8.5%;
}
.pm-box-c {
  top: 48%;
  left: 36.8%;
  width: 5.6%;
  height: 7.5%;
}
/* The evidence for the finding, one picture per step: the unusual area as a heat map, the outlined
   damage and its depth. Each is the close-up of the damage with a drawn treatment. */
.pm-evidence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pm-ev {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  container-type: inline-size;
  border: 1px solid var(--color-rule-strong);
  border-radius: 4px;
  background: #0d0d10;
}
.pm-ev-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-ev-area::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      ellipse 20% 30% at 45% 46%,
      rgb(255 92 56 / 0.85),
      rgb(255 196 64 / 0.5) 45%,
      transparent 75%
    ),
    radial-gradient(
      ellipse 11% 16% at 72% 57%,
      rgb(255 120 56 / 0.75),
      rgb(255 196 64 / 0.4) 50%,
      transparent 80%
    ),
    radial-gradient(ellipse 12% 14% at 17% 29%, rgb(255 196 64 / 0.6), transparent 80%),
    rgb(32 72 190 / 0.55);
  mix-blend-mode: hard-light;
}
.pm-ev-depth .pm-ev-img {
  filter: grayscale(1) contrast(1.9) brightness(0.8);
}
.pm-ev-box {
  position: absolute;
  z-index: 1;
  border: 1.5px solid var(--color-warning);
}
.pm-ev-box-a {
  top: 31%;
  left: 30%;
  width: 30%;
  height: 31%;
}
.pm-ev-box-b {
  top: 48%;
  left: 63%;
  width: 18%;
  height: 18%;
}
.pm-ev-label {
  position: absolute;
  z-index: 2;
  bottom: 7%;
  left: 5%;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgb(10 10 11 / 0.72);
  color: #f2f2f4;
  font: 500 clamp(7.5px, 5.4cqw, 10px) / 1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pm-finding .pm-glyph {
  color: var(--color-warning);
}
.pm-pill-ask {
  background: rgb(74 163 255 / 0.12);
  color: var(--color-accent);
}
.pm-rail-open .pm-rail-dot {
  background: var(--color-warning);
}

/* The site plan: one SVG stretched to the frame (viewBox 160 x 100), so a mark at x, y sits at
   x / 1.6 % and y %. Labels keep their size with the frame's width. */
.pm-site {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  container-type: inline-size;
  border: 1px solid var(--color-rule-strong);
  border-radius: 6px;
  background: #0d0d10;
}
.pm-site-plan {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.pm-site-plan > * {
  fill: none;
  stroke: var(--color-rule-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.pm-site-plan > .pm-site-bound {
  stroke-dasharray: 5 4;
}
.pm-site-plan > .pm-site-building {
  fill: var(--color-surface-raised);
  stroke: var(--color-muted);
}
.pm-site-plan > .pm-site-ramp {
  fill: rgb(153 207 177 / 0.12);
  stroke: var(--color-positive);
}
.pm-site-plan > .pm-site-drive {
  fill: rgb(242 242 244 / 0.04);
}
.pm-site-plan > .pm-site-lane {
  fill: rgb(74 163 255 / 0.1);
  stroke: var(--color-accent);
  stroke-dasharray: 4 3;
}
.pm-site-plan > .pm-site-park {
  stroke: rgb(223 189 135 / 0.55);
}
.pm-site-label,
.pm-site-tag,
.pm-site-miss span {
  font: 500 clamp(8px, 1.6cqw, 11px) / 1.35 var(--font-mono);
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.pm-site-label {
  position: absolute;
  color: var(--color-body);
  translate: -50% -50%;
}
.pm-site-label-building {
  top: 32%;
  left: 27.5%;
  color: var(--color-ink);
}
.pm-site-label-ramp {
  top: 58%;
  left: 15%;
  color: var(--color-positive);
}
.pm-site-label-gate {
  top: 88%;
  left: 14%;
}
.pm-site-tag {
  position: absolute;
  z-index: 1;
  padding: 2px 7px;
  border-radius: 3px;
  color: var(--color-paper);
  translate: -50% 0;
}
.pm-site-tag-lane {
  top: 84%;
  left: 51.9%;
  background: var(--color-accent);
}
.pm-site-tag-park {
  top: 42%;
  left: 76.25%;
  background: var(--color-warning);
}
.pm-site-miss {
  position: absolute;
  z-index: 1;
  top: 60%;
  left: 33.75%;
  display: grid;
  width: 10%;
  height: 12%;
  place-items: center;
  border: 1.5px dashed var(--color-warning);
  border-radius: 4px;
  background: rgb(223 189 135 / 0.08);
  color: var(--color-warning);
}
.pm-site-miss b {
  font: 600 clamp(11px, 2.4cqw, 16px) / 1 var(--font-body);
}
.pm-site-miss span {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  color: var(--color-warning);
  translate: -50% 0;
}
.pm-findings {
  display: grid;
  gap: 9px;
}
.pm-findings li {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.4;
}
.pm-findings .pm-pill {
  justify-self: start;
  margin-top: 1px;
}
.pm-findings b {
  display: block;
  color: var(--color-ink);
  font-weight: 600;
}

/* The delivery desk: three totals and the open order lines. A line that can ship shows its date;
   a line that cannot names the data it is missing, in amber. */
.pm-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.pm-kpi {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  background: var(--color-paper);
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.3;
}
.pm-kpi b {
  color: var(--color-ink);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}
.pm-kpi-gap {
  border-color: rgb(223 189 135 / 0.4);
}
.pm-kpi-gap b {
  color: var(--color-warning);
}
.pm-orders {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: 8px;
}
.pm-order {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--color-rule);
  color: var(--color-body);
  font-size: 12.5px;
  line-height: 1.35;
}
.pm-order > span:first-child {
  color: var(--color-muted);
  font: 400 11px/1.4 var(--font-mono);
}
.pm-order-head {
  border-top: 0;
  color: var(--color-muted);
  font: 500 10.5px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pm-order-head > span:first-child {
  font-size: 10.5px;
}
.pm-order-ok > span:last-child {
  color: var(--color-ink);
  font-weight: 600;
}
.pm-order-gap {
  background: rgb(223 189 135 / 0.06);
}
.pm-order-gap > span:last-child {
  color: var(--color-warning);
}
/* A narrow app drops the order numbers and stacks the totals and each finding's state. */
@container pm-app (max-width: 519px) {
  .pm-order {
    grid-template-columns: minmax(0, 1.3fr) minmax(64px, 0.8fr) minmax(0, 1.1fr);
    gap: 8px;
    padding: 7px 10px;
    font-size: 12px;
  }
  .pm-order-head {
    letter-spacing: 0.02em;
  }
  .pm-order > span:first-child {
    display: none;
  }
  .pm-kpi {
    flex-direction: column;
    gap: 4px;
  }
  .pm-findings li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* A narrow camera keeps the alert on its top row, beside the live badge and clock, so it never meets
   the labels below, and drops the camera name; a small one also drops the lane label and the clock. */
@container (max-width: 559px) {
  .pm-osd-id span {
    display: none;
  }
  .pm-banner {
    top: 3.2%;
  }
}
@container (max-width: 359px) {
  .pm-zone-label,
  .pm-osd-time {
    display: none;
  }
  .pm-osd {
    padding: 2px 6px;
  }
}

/* Wider containers add the agents beside the camera, then today's alerts beside both. */
@container pm-app (min-width: 600px) {
  .pm-app:not(.pm-compact) .pm-app-body {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
  .pm-app:not(.pm-compact) .pm-app-stage {
    padding: 18px;
  }
  .pm-app:not(.pm-compact) .pm-app-side {
    gap: 12px;
    padding: 18px 18px 18px 16px;
    border-left: 1px solid var(--color-rule);
  }
  .pm-app:not(.pm-compact) .pm-app-rail {
    grid-column: 1 / -1;
    padding: 14px 18px 118px;
  }
}
@container pm-app (min-width: 900px) {
  .pm-app:not(.pm-compact) .pm-app-body {
    grid-template-columns: 224px minmax(0, 1fr) 300px;
    padding-bottom: 96px;
  }
  .pm-app:not(.pm-compact) .pm-app-rail {
    grid-column: 1;
    grid-row: 1;
    padding: 18px 16px;
    border-top: 0;
    border-right: 1px solid var(--color-rule);
  }
  .pm-app:not(.pm-compact) .pm-app-stage {
    grid-column: 2;
    grid-row: 1;
  }
  .pm-app:not(.pm-compact) .pm-app-side {
    grid-column: 3;
    grid-row: 1;
  }
  .pm-app:not(.pm-compact) .pm-alert-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@container pm-app (min-width: 760px) {
  .pm-compact .pm-app-body {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
  .pm-compact .pm-app-stage {
    padding: 20px 0 20px 20px;
  }
  .pm-compact .pm-app-side {
    gap: 12px;
    padding: 20px;
  }
}
/* A compact view keeps its agents as a two-by-two grid until its column is wide: icon and name
   when narrow, with the step beneath when there is room. */
@container pm-app (max-width: 759px) {
  .pm-compact .pm-agents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .pm-compact .pm-agent {
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 8px 10px;
  }
  .pm-compact .pm-agent-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
  }
  .pm-compact .pm-agent-icon .pm-glyph {
    width: 13px;
    height: 13px;
  }
  .pm-compact .pm-agent .pm-dot,
  .pm-compact .pm-agent em,
  .pm-compact .pm-agent:not(:last-child)::after {
    display: none;
  }
  .pm-compact .pm-app-side {
    gap: 8px;
    padding-top: 10px;
  }
}
@container pm-app (max-width: 759px) {
  .pm-compact .pm-bar-note {
    display: none;
  }
}
@container pm-app (max-width: 599px) {
  .pm-bar-note {
    display: none;
  }
}
@container pm-app (max-width: 519px) {
  .pm-tabs {
    display: none;
  }
}
@container pm-app (max-width: 299px) {
  .pm-bar {
    gap: 10px;
    padding: 10px 12px;
  }
  .pm-bar .pm-brand {
    padding-right: 10px;
  }
  .pm-bar .pm-brand b {
    display: none;
  }
  .pm-bar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pm-compact .pm-app-stage {
    padding: 12px 12px 0;
  }
  .pm-compact .pm-app-side {
    padding: 10px 12px 12px;
  }
  .pm-compact .pm-agents {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .pm-compact .pm-agent {
    align-items: center;
    padding: 6px 10px;
  }
}
@container pm-app (max-width: 459px) {
  .pm-compact .pm-agent-text span,
  .pm-compact .pm-bar-note {
    display: none;
  }
  .pm-compact .pm-agent {
    align-items: center;
  }
  .pm-compact .pm-agent-text b {
    font-size: 12px;
  }
}

/* A compact checklist keeps one line per document until its column is wide; the file names return
   with room. */
@container pm-app (max-width: 759px) {
  .pm-compact .pm-checklist {
    gap: 6px;
  }
  .pm-compact .pm-check-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 6px 10px;
  }
  .pm-compact .pm-check-thumb {
    width: 22px;
    height: 28px;
  }
  .pm-compact .pm-check-thumb::before {
    inset: 6px 4px auto;
    height: 12px;
    background:
      linear-gradient(var(--color-rule-strong), var(--color-rule-strong)) 0 0 / 100% 2px no-repeat,
      linear-gradient(var(--color-rule-strong), var(--color-rule-strong)) 0 5px / 100% 2px no-repeat,
      linear-gradient(var(--color-rule-strong), var(--color-rule-strong)) 0 10px / 64% 2px no-repeat;
  }
  .pm-compact .pm-check-thumb .pm-dot {
    right: -6px;
    bottom: -6px;
    width: 14px;
    height: 14px;
  }
  .pm-compact .pm-check-thumb .pm-dot .pm-glyph {
    width: 8px;
    height: 8px;
  }
  .pm-compact .pm-check-miss .pm-check-thumb .pm-glyph {
    width: 13px;
    height: 13px;
  }
  .pm-compact .pm-check-main span {
    display: none;
  }
}
@container pm-app (max-width: 459px) {
  .pm-compact .pm-check-main b {
    font-size: 12px;
  }
}
/* A narrow column drops the file names of documents that were found, which would break mid-word;
   the missing document keeps its reason. */
@container pm-app (max-width: 359px) {
  .pm-check-row:not(.pm-check-miss) .pm-check-main span {
    display: none;
  }
}
@container pm-app (max-width: 299px) {
  .pm-compact .pm-pack-head span {
    display: none;
  }
}

/* Staged motion: only when product-mockups.js has marked the view. Without the script the steps
   stay in their final state; with scripting enabled but the script late, they appear after 3s.
   In a live view a unit's parts stay hidden until the script starts that unit (.pm-on); a finished
   view (done) and an unstaged one (static) carry no rules, so they are the plain final picture. */
@keyframes pm-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes pm-typing {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes pm-draw {
  from {
    stroke-dashoffset: 24;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pm-sweep {
  from {
    background-size: 0 100%;
  }
  to {
    background-size: 100% 100%;
  }
}
@keyframes pm-reveal {
  to {
    opacity: 1;
  }
}
@keyframes pm-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.pm-tick {
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
}
@media (scripting: enabled) {
  .pm:not([data-state]) .pm-step {
    opacity: 0;
    animation: pm-reveal 1ms 3s forwards;
  }
}
.pm[data-state='live'] .pm-step:not(.pm-on) {
  opacity: 0;
}
.pm[data-state='live'] .pm-step.pm-on {
  animation: pm-rise 500ms var(--ease-out) var(--pm-delay, 0ms) both;
}
.pm[data-state='live'] .pm-s.pm-on,
.pm[data-state='live'] .pm-avatar.pm-on,
.pm[data-state='live'] .pm-diff.pm-on,
.pm[data-state='live'] .pm-points.pm-on {
  animation: pm-fade 450ms var(--ease-out) var(--pm-delay, 0ms) both;
}
.pm[data-state='live'] .pm-on .pm-type {
  animation: pm-typing var(--pm-type, 900ms) steps(var(--pm-chars, 40), end)
    calc(var(--pm-delay, 0ms) + 120ms) both;
}
.pm[data-state='live'] .pm-on .pm-tick {
  animation: pm-draw 380ms ease-out calc(var(--pm-delay, 0ms) + 300ms) both;
}
.pm[data-state='live'] .pm-on .pm-doc-hit {
  animation: pm-sweep 700ms var(--ease-out) calc(var(--pm-delay, 0ms) + 600ms) both;
}
.pm[data-state='live'] .pm-on .pm-check-hit {
  animation: pm-sweep 800ms var(--ease-out) calc(var(--pm-delay, 0ms) + 500ms) both;
}
.pm[data-state='live'] .pm-overlay.pm-on {
  animation: pm-fade 450ms var(--ease-out) var(--pm-delay, 0ms) both;
}
@media (prefers-reduced-motion: reduce) {
  .pm .pm-step,
  .pm .pm-type,
  .pm .pm-tick,
  .pm .pm-doc-hit,
  .pm .pm-check-hit {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
    background-size: 100% 100% !important;
  }
  .pm .pm-footage {
    display: none !important;
  }
  .pm .pm-feed .pm-poster {
    visibility: visible !important;
  }
}
.motion-paused .pm .pm-step,
.motion-paused .pm .pm-type,
.motion-paused .pm .pm-tick,
.motion-paused .pm .pm-doc-hit,
.motion-paused .pm .pm-check-hit {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  stroke-dashoffset: 0 !important;
  background-size: 100% 100% !important;
}
.motion-paused .pm .pm-footage {
  display: none !important;
}
.motion-paused .pm .pm-feed .pm-poster {
  visibility: visible !important;
}
@media print {
  .pm .pm-step,
  .pm .pm-type,
  .pm .pm-tick,
  .pm .pm-doc-hit,
  .pm .pm-check-hit {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
    background-size: 100% 100% !important;
  }
  .pm .pm-footage {
    display: none !important;
  }
  .pm .pm-feed .pm-poster {
    visibility: visible !important;
  }
}

/* Page layouts */
.pm figcaption {
  margin-top: 14px;
  color: var(--color-muted);
  font-size: 13px;
}
body.page-home main .home-assistant {
  padding-block: var(--space-section);
  border-top: 1px solid var(--color-rule);
}
body.page-home main .home-assistant .story-heading {
  margin-bottom: var(--space-xl);
}
body.page-home main .home-assistant .story-heading .text-link {
  margin-top: var(--space-sm);
}
body.page-inner main .pm-showcase {
  padding-block: 0 var(--space-section);
}
body.page-inner main .pm-showcase .pm {
  margin-top: var(--space-md);
}
body.page-inner main .pm-showcase .pm-lead {
  max-width: 62ch;
  margin: 0;
  color: var(--color-body);
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}
body.page-inner main .assistant-tasks article .pm-case {
  margin-bottom: 28px;
}
body.page-inner main .assistant-tasks article {
  display: flex;
  flex-direction: column;
}
body:is(.page-home, .page-inner) main .product-architecture-visual {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  overflow: visible;
  border: 0;
}
body:is(.page-home, .page-inner) main .product-architecture-visual .product-part {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 0;
  border: 0;
  background: transparent;
}
body:is(.page-home, .page-inner) main .product-architecture-visual .product-part h3 {
  max-width: none;
  margin: 0;
  font-size: 26px;
}
.product-architecture-visual .pm-part-media {
  display: grid;
  min-height: 356px;
  place-items: center;
  padding: 18px;
  border: 1px solid var(--color-rule);
  background: var(--color-surface);
}
.product-architecture-visual .pm-part-media .pm,
.product-architecture-visual .pm-part-media .pm-window {
  width: 100%;
}
.product-architecture-visual .pm-part-media .pm-window {
  border-color: var(--color-rule);
}
.product-architecture-visual .pm-part-media > img {
  width: auto;
  max-width: 78%;
  height: 316px;
  object-fit: contain;
}
.product-architecture-visual .product-part-detail .text-link {
  padding-top: 18px;
}
.product-visual-note {
  margin: 14px 0 0;
  color: var(--color-muted);
  font-size: 13px;
}
.setup-gives {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.setup-gives article {
  padding-top: 24px;
  border-top: 1px solid var(--color-rule);
}
.setup-gives h3 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.3;
}
.setup-gives p {
  margin: 0;
}

/* Side-by-side columns share rows, so pictures, headings and text line up whatever the wrapping.
   Without subgrid support each column simply keeps its own flow. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 801px) {
    body.page-inner main .assistant-tasks {
      grid-template-rows: auto auto 1fr;
      row-gap: 0;
    }
    body.page-inner main .assistant-tasks article .pm-case {
      margin-bottom: 0;
    }
    body.page-inner main .assistant-tasks h3 {
      margin-top: 32px;
    }
    body.page-inner main .assistant-tasks dl {
      margin-top: 0;
    }
    body.page-inner main .assistant-tasks article {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
    body.page-inner main .assistant-tasks .pm-case,
    body.page-inner main .assistant-tasks .pm-case .pm-frame,
    body.page-inner main .assistant-tasks .pm-case .pm-window {
      height: 100%;
    }
  }
  @media (min-width: 1001px) {
    body:is(.page-home, .page-inner) main .product-architecture-visual {
      grid-template-rows: auto auto 1fr;
      gap: 0 32px;
    }
    body:is(.page-home, .page-inner) main .product-architecture-visual .product-part {
      display: grid;
      grid-row: span 3;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
      gap: 0;
    }
    body:is(.page-home, .page-inner) main .product-architecture-visual .product-part-title {
      padding-top: 22px;
    }
    body:is(.page-home, .page-inner) main .product-architecture-visual .product-part-detail {
      align-self: start;
      padding-top: 14px;
    }
    .product-architecture-visual .pm-part-media {
      min-height: 0;
    }
  }
}
@media (max-width: 1000px) {
  .pm-side {
    display: none;
  }
  .pm-assistant .pm-window {
    min-height: 0;
  }
  .pm-main {
    padding: 18px 20px 120px;
  }
  .pm-bar-note {
    display: none;
  }
  body:is(.page-home, .page-inner) main .product-architecture-visual {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .setup-gives {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
@media (max-width: 640px) {
  .pm-window {
    border-radius: 8px;
    font-size: 12px;
  }
  .pm-main {
    gap: 16px;
    padding: 16px 14px 112px;
  }
  .pm-thread {
    gap: 22px;
  }
  .pm-text {
    font-size: 13px;
  }
  .pm-reply {
    gap: 10px;
  }
  .pm-chips span:nth-child(n + 3) {
    display: none;
  }
  .pm-case-body {
    padding: 14px 14px 16px;
  }
  .pm-actions em {
    width: 100%;
    margin-left: 0;
  }
  .pm[data-fade~='bottom'] .pm-frame::after {
    height: 110px;
  }
  .product-architecture-visual .pm-part-media {
    min-height: 0;
    padding: 12px;
  }
}

/* Homepage setup story: the app view beside the copy, steps on the right. */
body.page-home main .home-work {
  grid-template-areas: 'copy view' 'steps view';
  align-items: start;
}
body.page-home main .home-work .home-work-copy {
  grid-area: copy;
}
body.page-home main .home-work .home-work-view {
  grid-area: view;
}
body.page-home main .home-work .home-setup-steps {
  grid-area: steps;
  align-self: start;
}
@media (max-width: 760px) {
  body.page-home main .home-work {
    grid-template-areas: 'copy' 'view' 'steps';
  }
}

/* Sector walkthroughs (/workflows/<sector>/): a list of the three tasks, then each task's scope text
   beside its task view. The list and the case panels are the pharma walkthrough's, tightened here. */
body.page-inner main .walkthrough-glance {
  padding-bottom: var(--space-md);
}
body.page-inner main .walkthrough-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.page-inner main .walkthrough-index a {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 44px;
  height: 100%;
  padding-top: 22px;
  border-top: 1px solid var(--color-rule-strong);
  color: var(--color-body);
  text-decoration: none;
}
body.page-inner main .walkthrough-index-role {
  color: var(--color-muted);
  font: 400 12px/1.5 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.page-inner main .walkthrough-index strong {
  color: var(--color-ink);
  font-size: 21px;
  font-weight: 560;
  line-height: 1.3;
}
body.page-inner main .walkthrough-index a > span:last-child {
  font-size: 15px;
  line-height: 1.6;
  text-wrap: pretty;
}
body.page-inner main .walkthrough-index a:hover strong {
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.page-inner main .case-explorer[data-sector-walkthrough] .case-panel + .case-panel {
  margin-top: 56px;
  padding-top: 64px;
}
body.page-inner main .case-explorer[data-sector-walkthrough] .case-source-links {
  border-bottom: 0;
  padding-bottom: 0;
}
body.page-inner main .walkthrough-view {
  min-width: 0;
}
/* A walkthrough of apps (Packet ECM) puts each app under its scope text at full width, with the three
   parts of the scope side by side when there is room. */
body.page-inner main .case-layout-app {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
@media (min-width: 1001px) {
  body.page-inner main .case-layout-app .case-narrative {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: column;
    column-gap: 40px;
    row-gap: 16px;
    align-items: start;
  }
  body.page-inner main .case-layout-app .case-narrative > h3 {
    margin: 0;
  }
  body.page-inner main .case-layout-app .case-narrative > :is(p, ul) {
    margin: 0;
  }
}
@media (max-width: 900px) {
  body.page-inner main .walkthrough-index {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
}