/* The interactive graph is isolated from the approved terminal and shared player. */
[data-workgraph] { border: 1px solid var(--color-base-300); background: var(--color-base-100); color: var(--color-base-content); border-radius: var(--radius-box); overflow: hidden; }
[data-workgraph] .wg-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 30px; }
[data-workgraph] .wg-eyebrow { display: block; font: 11px/1.5 ui-monospace,monospace; letter-spacing: .14em; color: var(--color-primary); }
[data-workgraph] h3 { margin: 10px 0 8px; font-size: clamp(21px,2.6vw,29px); font-weight: 600; letter-spacing: -.03em; }
[data-workgraph] .wg-heading p { margin: 0; color: color-mix(in oklab,var(--color-base-content) 62%,transparent); font-size: 14px; }
[data-workgraph] .wg-limit { white-space: nowrap; font: 12px ui-monospace,monospace; color: var(--color-secondary); }
[data-workgraph] .wg-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; padding: 18px 30px; border-block: 1px solid var(--color-base-300); }
[data-workgraph] .wg-controls { display: flex; flex-wrap: wrap; gap: 6px; }
[data-workgraph] .btn { font-size: 12px; min-height: 38px; height: auto; padding: 8px 12px; box-shadow: none; }
[data-workgraph] [data-action="play"] { min-width: 65px; background: var(--color-primary); color: var(--color-primary-content); border-color: transparent; }
[data-workgraph] .wg-narration { display: grid; grid-template-columns: 65px 1fr; gap: 20px; align-items: start; min-height: 98px; padding: 23px 30px; background: var(--color-base-200); }
[data-workgraph] [data-step] { padding-top: 3px; font: 11px/1.5 ui-monospace,monospace; color: var(--color-primary); }
[data-workgraph] [data-caption] { margin: 0; font-size: 14px; line-height: 1.6; max-width: 76ch; }
[data-workgraph] .wg-canvas { position: relative; margin: 30px; }
[data-workgraph] .wg-nodes { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,1fr); grid-template-areas: 'inspect api verify-api review' 'inspect ui verify-ui review'; gap: 30px 24px; align-items: center; }
[data-workgraph] .wg-connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
[data-workgraph] .wg-connectors path { fill: none; stroke: var(--color-base-300); stroke-width: 1.5; stroke-linejoin: round; }
[data-workgraph] .wg-connectors path[data-state="accepted"] { stroke: var(--color-secondary); }
[data-workgraph] .wg-connectors path[data-state="blocked"] { stroke: var(--color-error); stroke-dasharray: 3 4; }
[data-workgraph] .wg-connectors .wg-flow { stroke: var(--color-primary); stroke-dasharray: 5 7; animation: wg-flow 1.2s linear infinite; }
[data-workgraph][data-playing="false"] .wg-connectors .wg-flow { animation-play-state: paused; }
[data-workgraph] .wg-node { position: relative; z-index: 1; cursor: pointer; width: 100%; min-width: 0; min-height: 142px; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid var(--color-base-300); background: var(--color-base-100); text-align: left; transition: border-color .18s,background .18s; }
[data-workgraph] .wg-node:hover { background: var(--color-base-200); }
[data-workgraph] .wg-node[aria-pressed="true"] { outline: 1px solid var(--color-base-content); outline-offset: 3px; }
[data-workgraph] .wg-node[data-state="running"] { border-color: var(--color-primary); background: color-mix(in oklab,var(--color-primary) 6%,var(--color-base-100)); }
[data-workgraph] .wg-node[data-state="succeeded"] { border-color: var(--color-secondary); }
[data-workgraph] .wg-node[data-state="failed"], [data-workgraph] .wg-node[data-state="blocked"] { border-color: var(--color-error); }
[data-workgraph] .wg-node-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; font: 10px/1.5 ui-monospace,monospace; color: color-mix(in oklab,var(--color-base-content) 62%,transparent); }
[data-workgraph] .wg-status-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--color-base-300); }
[data-workgraph] [data-state="running"] .wg-status-dot { background: var(--color-primary); }
[data-workgraph] [data-state="succeeded"] .wg-status-dot { background: var(--color-secondary); }
[data-workgraph] :is([data-state="failed"],[data-state="blocked"]) .wg-status-dot { background: var(--color-error); }
[data-workgraph] .wg-node strong { display: block; font-size: 16px; line-height: 1.3; font-weight: 550; }
[data-workgraph] .wg-node-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; justify-content: space-between; font: 10px/1.5 ui-monospace,monospace; color: color-mix(in oklab,var(--color-base-content) 62%,transparent); }
[data-workgraph] [data-state="running"] [data-status] { color: var(--color-primary); }
[data-workgraph] [data-state="succeeded"] [data-status] { color: var(--color-secondary); }
[data-workgraph] :is([data-state="failed"],[data-state="blocked"]) [data-status] { color: var(--color-error); }
[data-workgraph] .wg-bottom { display: grid; grid-template-columns: 1.1fr 1fr; border-top: 1px solid var(--color-base-300); }
[data-workgraph] .wg-inspector, [data-workgraph] .wg-events { padding: 28px 30px; min-width: 0; }
[data-workgraph] .wg-events { border-left: 1px solid var(--color-base-300); }
[data-workgraph] h4 { margin: 10px 0 18px; font-size: 17px; font-weight: 550; }
[data-workgraph] .wg-inspector-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
[data-workgraph] [data-selected-status] { font: 11px ui-monospace,monospace; color: var(--color-primary); }
[data-workgraph] [data-instruction] { min-height: 66px; margin: 0 0 22px; font-size: 13px; line-height: 1.7; color: color-mix(in oklab,var(--color-base-content) 78%,transparent); }
[data-workgraph] dl { display: grid; gap: 12px; margin: 0; font-size: 12px; line-height: 1.6; }
[data-workgraph] dl div { display: grid; grid-template-columns: 95px 1fr; gap: 12px; }
[data-workgraph] dt { color: color-mix(in oklab,var(--color-base-content) 58%,transparent); }
[data-workgraph] dd { margin: 0; overflow-wrap: anywhere; }
[data-workgraph] .wg-evidence { margin-top: 22px; border-left: 2px solid var(--color-secondary); padding: 0 0 0 16px; }
[data-workgraph] h5 { margin: 0 0 8px; font: 11px ui-monospace,monospace; color: var(--color-secondary); }
[data-workgraph] [data-evidence] { min-height: 72px; margin: 0; font-size: 12px; line-height: 1.7; color: color-mix(in oklab,var(--color-base-content) 74%,transparent); }
[data-workgraph] ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
[data-workgraph] li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-base-300); font-size: 12px; line-height: 1.65; }
[data-workgraph] li span:first-child { font: 11px/1.8 ui-monospace,monospace; color: var(--color-primary); }
[data-workgraph] li[data-state="failed"], [data-workgraph] li[data-state="blocked"] { color: var(--color-error); }
[data-workgraph] .wg-footnote { display: flex; flex-wrap: wrap; gap: 14px 24px; padding: 18px 30px; border-top: 1px solid var(--color-base-300); font-size: 11px; line-height: 1.6; color: color-mix(in oklab,var(--color-base-content) 60%,transparent); }
[data-workgraph] .wg-footnote span { flex: 1 1 360px; }
[data-workgraph] a { text-decoration: underline; text-underline-offset: 3px; }
@keyframes wg-flow { to { stroke-dashoffset: -24; } }
@media(max-width: 790px) {
  [data-workgraph] .wg-nodes { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: auto; grid-template-areas: 'inspect inspect' 'api ui' 'verify-api verify-ui' 'review review'; gap: 30px 18px; }
  [data-workgraph] [data-task="inspect"], [data-workgraph] [data-task="review"] { max-width: 260px; justify-self: center; }
  [data-workgraph] .wg-bottom { grid-template-columns: 1fr; }
  [data-workgraph] .wg-events { border-left: 0; border-top: 1px solid var(--color-base-300); }
}
@media(max-width: 520px) {
  [data-workgraph] .wg-heading { align-items: flex-start; }
  [data-workgraph] .wg-limit { display: none; }
  [data-workgraph] :is(.wg-heading,.wg-toolbar,.wg-narration,.wg-inspector,.wg-events,.wg-footnote) { padding: 22px 18px; }
  [data-workgraph] .wg-toolbar { gap: 18px; }
  [data-workgraph] .wg-narration { grid-template-columns: 1fr; gap: 8px; min-height: 146px; }
  [data-workgraph] .wg-canvas { margin: 28px 18px; }
  [data-workgraph] .wg-node { min-height: 168px; padding: 14px; gap: 16px; }
  [data-workgraph] .wg-node strong { font-size: 14px; }
  [data-workgraph] .wg-node-top { font-size: 9px; }
  [data-workgraph] .wg-node-meta { flex-direction: column; font-size: 10px; }
  [data-workgraph] .wg-controls { justify-content: space-between; width: 100%; }
  [data-workgraph] .wg-controls .btn { padding-inline: 10px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-workgraph] *, [data-workgraph] .wg-connectors .wg-flow { animation: none; transition: none; }
}