.workflow-status {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid var(--event-line, var(--border));
  border-left: 4px solid var(--event-primary, var(--primary));
  border-radius: 8px;
  background: var(--event-surface, var(--surface));
  box-shadow: 0 8px 24px rgb(15 35 65 / 7%);
}
.workflow-status-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.workflow-status-head h2 { margin: 2px 0 0; font-size: 18px; }
.workflow-status-head .eyebrow { margin: 0; }
.workflow-status-badge { padding: 7px 10px; border: 1px solid var(--event-line, var(--border)); border-radius: 999px; background: var(--event-primary-soft, var(--surface-soft)); color: var(--event-primary-strong, var(--primary)); font-size: 12px; font-weight: 800; }
.workflow-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.workflow-facts > div { min-width: 0; padding: 12px; border: 1px solid var(--event-line, var(--border)); border-radius: 7px; background: var(--event-surface-soft, var(--surface-soft)); }
.workflow-facts dt { display: flex; align-items: center; gap: 6px; color: var(--event-muted, var(--text-muted)); font-size: 11px; font-weight: 750; text-transform: uppercase; }
.workflow-facts dt svg { width: 16px; height: 16px; }
.workflow-facts dd { margin: 6px 0 0; overflow-wrap: anywhere; font-weight: 750; }
.workflow-history, .workflow-delivery { border-top: 1px solid var(--event-line, var(--border)); }
.workflow-history summary, .workflow-delivery summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 750; }
.workflow-history summary span, .workflow-delivery summary span { display: flex; align-items: center; gap: 7px; }
.workflow-history summary svg, .workflow-delivery summary svg { width: 18px; height: 18px; color: var(--event-primary, var(--primary)); }
.workflow-history summary small, .workflow-delivery summary small { color: var(--event-muted, var(--text-muted)); font-weight: 600; }
.workflow-history ol, .workflow-delivery ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.workflow-history li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 11px 0; border-top: 1px solid var(--event-line, var(--border)); }
.workflow-event-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 7px; background: var(--event-primary-soft, var(--surface-soft)); color: var(--event-primary, var(--primary)); }
.workflow-event-icon svg { width: 17px; height: 17px; }
.workflow-history li div { display: grid; gap: 3px; min-width: 0; }
.workflow-history li span, .workflow-history li small { color: var(--event-muted, var(--text-muted)); font-size: 12px; }
.workflow-delivery li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--event-line, var(--border)); }
.workflow-delivery p { margin: 8px 0 0; color: var(--event-muted, var(--text-muted)); font-size: 12px; line-height: 1.45; }
.workflow-offline-note, .workflow-status-unavailable { display: flex; align-items: center; gap: 10px; color: var(--event-muted, var(--text-muted)); }
.workflow-offline-note { padding: 10px 12px; border: 1px solid var(--warning, #9a6700); border-radius: 7px; background: color-mix(in srgb, var(--warning, #9a6700) 9%, transparent); }
.workflow-offline-note svg, .workflow-status-unavailable > svg { width: 20px; height: 20px; flex: 0 0 auto; }
.workflow-status-unavailable div { display: grid; gap: 3px; }

@media (max-width: 760px) {
  .workflow-status { padding: 15px; }
  .workflow-facts { grid-template-columns: 1fr; }
  .workflow-status-head { align-items: flex-start; flex-direction: column; }
  .workflow-history summary, .workflow-delivery summary { align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; padding-block: 7px; }
}