.cs-cover.workflow-cover {
  aspect-ratio: 6 / 5;
  max-width: 960px;
  margin-inline: auto;
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 44px);
}

.workflow-grid > * {
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-block: 20px 0;
}

.workflow-grid h3 {
  margin-block: 12px 8px;
  font-size: clamp(19px, 2vw, 23px);
}

.workflow-grid p, .workflow-matrix dd, .workflow-related p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.75;
}

.workflow-index {
  color: var(--mute);
  font: 600 11px/1.6 var(--latin);
  letter-spacing: .1em;
}

.workflow-state {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  margin-top: 12px;
  border-radius: 8px;
  padding: 10px 13px;
  font-size: 15px;
  font-weight: 700;
}

.workflow-state-warning { background: #f9e5ad; color: #634709; }
.workflow-state-ready { background: #e8e4f7; color: #493784; }
.workflow-state-external { background: #f2dddd; color: #78373c; }

.workflow-matrix {
  max-width: 58rem;
  border-block: 1px solid var(--line);
}

.workflow-matrix div {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 3fr);
  gap: 8px 28px;
  padding-block: 15px;
}

.workflow-matrix div + div {
  border-top: 1px solid var(--line);
}

.workflow-matrix dt {
  font-weight: 700;
}

.workflow-note {
  margin-top: 20px;
  color: var(--mute);
  font-size: 13px;
}

.workflow-screens {
  margin-top: clamp(38px, 6vw, 72px);
}

.workflow-screens-head {
  margin-bottom: 18px;
}

.workflow-screens-head h3 {
  font-size: clamp(21px, 2.5vw, 28px);
}

.workflow-screens-head p {
  margin-top: 5px;
  color: var(--mute);
  font-size: 14px;
}

.workflow-screen-example + .workflow-screen-example {
  margin-top: clamp(26px, 5vw, 52px);
}

.workflow-screen-example h4 {
  margin-bottom: 12px;
  font-size: 18px;
}

.workflow-screen-example h4 span {
  margin-inline-end: 6px;
  color: var(--mute);
  font: 500 13px/1.5 var(--latin);
}

.workflow-screen-pair.ba2 {
  grid-template-columns: minmax(0, 1fr);
}

.workflow-detail-narrow .sheet {
  max-width: 255px;
}

.workflow-related {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-block: 30px;
  margin-block: 28px;
}

.workflow-related strong {
  margin-inline-end: 8px;
  color: var(--ink);
}

.workflow-related a {
  padding-block: 8px;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 680px) {
  .workflow-grid, .workflow-matrix div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.batch-screen-reason {
  max-width: 54em;
  margin-bottom: 16px;
  color: var(--ink-2);
  font-size: 15px;
}

.batch-flow-transcript {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 15px;
}

.batch-flow-transcript summary {
  width: fit-content;
  cursor: pointer;
}


.permission-table.preview-rules {
  min-width: 0;
}

.preview-rules tbody th {
  width: 10em;
}

@media (max-width: 560px) {
  .preview-rules tbody th {
    width: 6.5em;
  }

  .permission-table.preview-rules th,
  .permission-table.preview-rules td {
    padding: 12px;
  }
}

#handoff .sub-head + .workflow-matrix {
  margin-top: 16px;
}