.work-execution { position: sticky; top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 22px; color: #26364c; }
.work-execution-flow, .work-execution-inspector { min-width: 0; }
.work-execution-flow > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.work-execution h3 { margin: 0; font-size: 14px; font-weight: 550; }
.work-execution small, .work-execution-flow > p { color: #62748d; font-size: 11px; }
.work-execution-canvas { max-height: calc(100dvh - 235px); overflow: auto; border: 1px solid #dfe6f1; border-radius: 12px; background: #f8faff radial-gradient(#dae1ed .8px, transparent .8px); background-size: 18px 18px; overscroll-behavior: contain; }
.work-execution-canvas > div { position: relative; }
.work-execution-canvas > div > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.work-execution-canvas > div > svg path { stroke: #9eafc6; stroke-width: 1.5px; fill: none; vector-effect: non-scaling-stroke; }
.work-execution-node { position: absolute; transform: translateX(-50%); display: grid; grid-template-columns:24px minmax(0,1fr); grid-template-rows:15px 12px; align-items:center; column-gap:7px; row-gap:1px; width:190px; height:44px; padding: 7px 9px; border: 1px solid #dbe2ee; border-radius: 8px; background: #fff; color: #26364c; font: inherit; text-align: left; }
.work-execution-node > i { grid-row:1 / 3; display: grid; place-items: center; flex: 0 0 24px; height: 26px; border-radius: 6px; background: #eeeafd; color: #7560ac; }
.work-execution-node > i > svg { width: 14px; height: 14px; }
.work-execution-node > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.work-execution-node > small { grid-column:2; margin-left:0; max-width:none; font-size: 9px; }
.work-execution-node.is-source > i { background: #fff0e3; color: #a36a3b; }
.work-execution-node.is-action > i { background: #eaf0fe; color: #537dbd; }
.work-execution-node:is(.is-output, .is-review) > i { background: #e9f5ef; color: #4c8b6f; }
.work-execution-node:hover { background: #f0f5ff; border-color: #a2b9dc; }
.work-execution-node.is-selected { background: #edf3ff; border-color: #6487c4; box-shadow: 0 0 0 3px #668cc912; }
.work-execution-node[data-state="failed"] { border-color: #c8857d; background: #fff6f3; }
.work-execution-node:is([data-state="skipped"], [data-state="pending"]) { border-style: dashed; }
.work-execution-inspector { display: flex; flex-direction: column; max-height: calc(100dvh - 220px); border-left: 1px solid #e2e7ef; padding-left: 18px; background: #fff; }
.work-execution-inspector > header, .work-execution-explanation { flex-shrink: 0; }
.work-execution-inspector > header { border-bottom:1px solid #e2e7ef; padding-bottom:10px; }
.work-execution-inspector h3 { font-size: 16px; margin:6px 0 8px; overflow-wrap: anywhere; }
.work-execution-status { display: inline-flex; padding: 3px 6px; border-radius: 4px; background: #edf2f8; color: #536d91; font-size: 11px; }
.work-execution-explanation { margin:8px 0; }
.work-execution h4 { font-size: 12px; margin: 0 0 7px; font-weight: 550; }
.work-execution-explanation p, .work-execution-data p { font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.work-execution-explanation details { font-size: 11px; color: #62748d; }
.work-execution button:focus-visible, .work-execution summary:focus-visible { outline: 2px solid #315f9c; outline-offset: 3px; }
.work-execution-explanation > button, .work-execution-inspector > button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #2c5c9c; font: inherit; font-size: 11px; }
.work-execution-explanation > button svg { width: 13px; height: 13px; }
.work-execution-payloads { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.work-execution-data { border: 1px solid #e1e7f0; border-radius: 7px; margin-bottom:8px; overflow:hidden; }
.work-execution-data h4 { margin: 0; }
.work-execution-data h4 > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 0; padding:8px 10px; background:#f4f7fd; color: inherit; text-align: left; font: inherit; font-size: 12px; }
.work-execution-data.is-output h4 > button { background: #eef6f4; }
.work-execution-data h4 > button > span { display: grid; gap: 4px; }
.work-execution-data h4 > button svg { width: 14px; height: 14px; }
.work-execution-data [aria-expanded="true"] > svg { transform: rotate(180deg); }
.work-execution-data > div { padding: 10px; }
.work-execution-data > div[hidden] { display: none; }
.work-execution-data pre { margin: 0; padding: 10px; border-radius: 6px; background: #f5f7fa; white-space: pre-wrap; overflow-wrap: anywhere; font: 11px/1.7 ui-monospace, monospace; }
@media (max-width: 850px) {
  .work-execution { position: static; grid-template-columns: minmax(0, 1fr); }
  .work-execution-inspector { border-left: 0; border-top: 1px solid #e2e7ef; padding: 18px 0 0; max-height: none; }
  .work-execution-payloads { overflow: visible; }
}

.work-execution-inspector > .work-execution-artifact { display:flex; align-items:center; gap:8px; flex-shrink:0; width:100%; padding:12px; margin-bottom:10px; border:1px solid #c9dceb; border-radius:8px; background:#edf7f5; color:#2d6159; text-align:left; }
.work-execution-artifact > span { display:grid; gap:5px; flex:1; min-width:0; }
.work-execution-artifact strong { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.work-execution-artifact small { color:#5d807c; font-size:11px; }
.work-execution-artifact svg { width:16px; height:16px; flex-shrink:0; }
.work-execution-explanation { height:clamp(56px,calc(100dvh - 610px),180px); max-height:clamp(56px,calc(100dvh - 610px),180px); overflow:auto; overscroll-behavior:contain; }
.work-execution-receipts ul { margin:10px 0; padding-left:16px; }
.work-execution-receipts p { overflow-wrap:anywhere; font-size:11px; }
.work-execution .work-execution-node:hover { background:#f0f5ff; border-color:#a2b9dc; }
.work-execution-inspector > button.work-execution-artifact:hover { background:#e2f0ec; border-color:#b7d4cb; color:#2d6159; }