.flow-overview{background:#fff;border:1px solid #dbe6e7;border-radius:12px;padding:23px 24px;margin-bottom:22px}.flow-stat-row{display:grid;grid-template-columns:repeat(5,1fr);margin:23px 0 19px}.flow-stat-row>div{border-right:1px solid #e5ebef;padding-left:22px;display:flex;gap:9px;align-items:baseline}.flow-stat-row>div:first-child{padding-left:0}.flow-stat-row>div:last-child{border:0}.flow-stat-row strong{font-size:27px;font-weight:600;font-variant-numeric:tabular-nums}.flow-stat-row span{font-size:11px;color:#657784}.flow-stat-row .is-late strong,.is-late{color:#ac3d3d}.flow-stat-row .is-blocked strong{color:#965815}.flow-step-strip{display:flex;gap:3px;width:100%;min-height:29px}.step-segment{flex:1;min-width:0;border:1px solid transparent;border-radius:3px;padding:6px 0;min-height:28px;font-size:9px;font-weight:550}.step-segment:hover{outline:2px solid #355f70;outline-offset:1px}.tone-done{--node-color:#7da4cf;--node-bg:#eaf3fe;--node-border:#b6cde8;--node-ink:#446d9a;background:var(--node-bg);color:var(--node-ink)}.tone-active{--node-color:#0f766e;--node-bg:#e0f5f0;--node-border:#3f9f91;--node-ink:#0b655c;background:var(--node-bg);color:var(--node-ink)}.tone-ready{--node-color:#91a4b7;--node-bg:#f1f3f5;--node-border:#c7d0d9;--node-ink:#556b80;background:var(--node-bg);color:var(--node-ink)}.tone-waiting{--node-color:#aab6c0;--node-bg:#f1f3f5;--node-border:#d0d8df;--node-ink:#637582;background:var(--node-bg);color:var(--node-ink)}.tone-blocked{--node-color:#b88822;--node-bg:#fff4cf;--node-border:#c59025;--node-ink:#77550b;background:var(--node-bg);color:var(--node-ink)}.tone-na,.tone-skipped{--node-color:#b5bfc4;--node-bg:#f8fafb;--node-border:#dbe1e5;--node-ink:#8998a2;background:#f3f5f7;color:#8998a2}.tone-skipped{background:repeating-linear-gradient(135deg,#e8eef0 0 3px,#f8fafb 3px 7px)}.flow-current{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:19px;padding-top:16px;border-top:1px solid #edf1f3}.flow-current-label{color:#657784;font-size:11px;margin-right:6px}.flow-current-chip{display:flex;align-items:center;gap:6px;border:1px solid #dbe7e8;background:#f9fbfb;border-radius:5px;padding:7px 9px;font-size:11px;max-width:100%;min-width:0}.flow-current-chip>span:last-child{font-size:10px;color:#657784;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flow-current-chip:hover{border-color:#74a99a;background:#eff7f3}.flow-current-chip.is-late{border-color:#e1b6b0;background:#fff7f5}.panorama-panel{border:1px solid #dce5e9;border-radius:12px;background:#fff;overflow:hidden;min-width:0}.panorama-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 17px;border-bottom:1px solid #e5ebef}.panorama-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.zoom-controls{display:inline-flex;align-items:center;gap:0;border:1px solid #d5e0e5;border-radius:6px;margin:0 3px;overflow:hidden}.zoom-controls button{border:0;background:#fff;min-width:28px;min-height:30px;font-size:17px}.zoom-controls button:hover{background:#edf4f2}.zoom-controls output{font-size:11px;min-width:42px;text-align:center;font-variant-numeric:tabular-nums}.diagram-legend{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 18px;font-size:10px;color:#657784;border-bottom:1px solid #e5ebef}.diagram-legend>span{display:flex;align-items:center;gap:5px}.diagram-legend i{width:10px;height:10px;border:1px solid var(--node-color);border-radius:3px}.diagram-legend .edge-key{margin-left:auto;color:#7c8d98}.diagram-instructions{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 18px;background:#fafcfd;color:#71828e;font-size:10px}.diagram-instructions select{font-size:11px;padding:5px;border:1px solid #dbe4e9;border-radius:5px;color:#4e6572;background:#fff;max-width:210px}.diagram-viewport{height:680px;overflow:auto;position:relative;overscroll-behavior:contain;background-color:#f8fafc;background-image:radial-gradient(#cedbe3 .8px,transparent .8px);background-size:16px 16px;scrollbar-gutter:stable;max-width:100%}.diagram-viewport:focus-visible{outline:3px solid #6aa9a1;outline-offset:-3px}#diagram-space{position:relative;overflow:hidden;margin-inline:auto}.diagram-canvas{position:absolute;left:0;top:0;transform-origin:top left}.diagram-lane{position:absolute;top:0;border-right:1px dashed #d6e2e8;background:#ffffff35;pointer-events:none}.diagram-lane:nth-child(even){background:#e8f0f53d}.diagram-lane-title{font-size:14px;font-weight:600;text-align:center;color:#536d7c;padding:24px 0 17px;border-bottom:1px solid #dce6eb}.diagram-links{width:100%;height:100%;position:absolute;left:0;top:0;pointer-events:none;overflow:visible}.diagram-edge path{fill:none;stroke:#9eb0bb;stroke-width:1.5;opacity:.65}.diagram-edge.is-complete path{stroke:#7fa5cc}.diagram-edge.is-context path{stroke-dasharray:5 4}.diagram-edge.is-inactive path{opacity:.25;stroke-dasharray:3 5}.diagram-edge text{font-size:10px;fill:#315d73;opacity:0;paint-order:stroke;stroke:#f3f7fa;stroke-width:4px}.diagram-edge.is-highlighted path{stroke:#386fa8;stroke-width:3;opacity:1}.diagram-edge.is-highlighted text{opacity:1}.diagram-node{position:absolute;text-align:left;border:1px solid var(--node-border);border-left:4px solid var(--node-color);border-radius:8px;background:var(--node-bg);padding:10px 12px 9px;display:flex;flex-direction:column;gap:5px;color:#263e4d;box-shadow:0 2px 3px #22445c05;overflow:hidden}.diagram-node:hover,.diagram-node:focus-visible{outline:2px solid var(--node-color);outline-offset:3px;z-index:2}.diagram-node.is-located{outline:3px solid #d29b37;outline-offset:4px;z-index:2;box-shadow:0 0 0 7px #f9d98735}.diagram-node-head{display:flex;align-items:center;justify-content:space-between;color:var(--node-ink);font-size:11px;line-height:1.3}.diagram-node-head>span:first-child{font-weight:650}.diagram-state{font-size:10px;border:1px solid var(--node-border);padding:2px 5px;border-radius:4px;background:#ffffff88}.diagram-node>strong{font-size:14px;line-height:1.45;font-weight:600;min-height:40px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.diagram-owner{display:flex;justify-content:space-between;gap:6px;font-size:12px;color:#536d7c}.diagram-owner>span{font-size:10px;color:#71828e}.diagram-duration{font-size:11px;font-weight:550;color:var(--node-ink);margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.diagram-date{font-size:10px;color:#71828e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:14px}.diagram-date.is-late{color:#a13e38}.diagram-node.tone-na,.diagram-node.tone-skipped{border-style:dashed;opacity:.72}
/* Fade the whole pending card; attention states use their own tones. */
.diagram-node.tone-waiting{opacity:.45}
.diagram-node.tone-ready{opacity:.6}
.diagram-node:is(.tone-waiting,.tone-ready):is(:hover,:focus,.is-located){opacity:1}
.event-node{border-style:dashed;border-left-width:1px;border-radius:18px}.event-node>strong{min-height:35px}.timing-help{padding:15px 18px;border-top:1px solid #e5ebef;font-size:11px;color:#657784}.timing-help summary{cursor:pointer;color:#3d625e}.timing-help p{margin-top:9px;max-width:1000px;font-size:11px}.timing-table{width:100%;border-collapse:collapse;min-width:930px;font-size:12px}.timing-table th{padding:14px 17px;text-align:left;font-size:11px;font-weight:500;color:#657784;background:#fafcfd;border-bottom:1px solid #e5ebef}.timing-table td{padding:13px 17px;border-bottom:1px solid #edf1f3;line-height:1.8;vertical-align:top;font-variant-numeric:tabular-nums}.timing-table small{display:block;font-size:10px;color:#71828e;line-height:1.7}.timing-table small.is-late{color:#a13e38}.timing-table .not-applicable{color:#8c9aa3;background:#fafbfc}.timing-table .badge{margin-top:4px}.timing-table .batch-link{max-width:220px;line-height:1.7}.task-timing-summary{margin-bottom:19px;background:#f3f8f7;border:1px solid #dcebe5;border-radius:8px;padding:13px 15px;font-size:12px;line-height:1.9}.task-timing-summary p{font-size:11px;color:#657784}.task-timing-summary .is-late{font-size:11px;color:#a13e38}
@media(max-width:1100px){.flow-stat-row>div{padding-left:13px;gap:6px}.flow-stat-row strong{font-size:23px}.flow-overview{padding:19px}.flow-stat-row span{font-size:10px}.diagram-legend .edge-key{margin-left:0}.panorama-controls{gap:4px}}
@media(max-width:760px){.flow-overview{padding:17px}.flow-stat-row{grid-template-columns:repeat(3,1fr);gap:16px 0;margin:19px 0}.flow-stat-row>div{padding-left:12px;display:block}.flow-stat-row>div:nth-child(3){border:0}.flow-stat-row>div:nth-child(4){padding-left:0}.flow-stat-row strong{display:block;font-size:25px}.flow-stat-row span{display:block;margin-top:3px}.flow-step-strip{gap:2px;flex-wrap:wrap}.step-segment{flex:0 0 calc((100% - 22px)/12);font-size:9px;min-height:24px;padding:3px 0}.flow-current-chip{font-size:10px}.flow-current-chip>span:last-child{max-width:130px}.flow-current-label{width:100%;margin-bottom:3px}.panorama-toolbar{padding:12px}.panorama-controls{gap:5px}.panorama-controls .btn{padding:6px 8px;font-size:11px}.diagram-instructions{padding:10px 12px;align-items:flex-start;flex-direction:column}.diagram-instructions select{max-width:245px}.diagram-legend{padding:12px;gap:10px;font-size:9px}.diagram-viewport{height:65vh;min-height:440px}.timing-help{padding:13px}.detail-tabs{overflow:auto;gap:20px;white-space:nowrap}}

.flow-current .is-late .state-dot{background:#c05454}

.tone-warning{--node-color:#c79a29;--node-bg:#fff4cf;--node-border:#d7ae4e;--node-ink:#80600b;background:var(--node-bg);color:var(--node-ink)}
.tone-severe{--node-color:#c2645d;--node-bg:#fce9e7;--node-border:#d9938f;--node-ink:#a53d35;background:var(--node-bg);color:var(--node-ink)}
/* Full-screen workspace. Native task dialogs can open above this modal. */
body.panorama-open{overflow:hidden}
.panorama-entry{color:#285f99;border-color:#b8cee5;background:#f5f9fe}
#panorama-dialog{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#fff;color:#263e4d;overflow:hidden;animation:none}
#panorama-dialog[open]{display:flex;flex-direction:column}
#panorama-dialog::backdrop{background:#172c3a66}
.panorama-shell-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 24px;border-bottom:1px solid #dce5ec;flex-shrink:0}
.panorama-heading{display:flex;align-items:center;gap:12px;min-width:0}
.panorama-heading>div{min-width:0}
.panorama-heading-icon{display:grid;place-items:center;width:37px;height:37px;background:#eaf3fe;color:#376ca5;border-radius:9px;flex-shrink:0}
.panorama-heading h2{font-size:19px;line-height:1.4}
.panorama-heading h2 span{font-weight:400;color:#657784;margin-left:12px;font-size:15px}
.panorama-heading p{font-size:11px;color:#71828e;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panorama-shell-header>.btn{flex-shrink:0}
.panorama-shell-header kbd{font:10px system-ui;color:#8898a3;margin-left:8px;padding:2px 4px;border:1px solid #e0e6eb;border-radius:3px}
.panorama-dialog-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
#panorama-dialog .flow-overview{padding:13px 24px 10px;margin:0;border:0;border-bottom:1px solid #dce5ec;border-radius:0;flex-shrink:0}
.flow-metrics{display:flex;align-items:center;gap:25px;margin-bottom:12px;font-variant-numeric:tabular-nums}
.flow-progress-caption{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.flow-progress-caption>strong{font-size:28px;font-weight:600;color:#326ba9}
.flow-progress-caption small{font-size:14px;margin-left:2px}
.flow-progress-caption>span{font-size:11px;color:#657784}
#panorama-dialog .flow-stat-row{display:flex;align-items:center;justify-content:center;flex:1;gap:26px;margin:0}
#panorama-dialog .flow-stat-row>div{display:flex;align-items:baseline;gap:7px;border:0;padding:0;white-space:nowrap}
#panorama-dialog .flow-stat-row strong{font-size:22px;font-weight:600}
#panorama-dialog .flow-stat-row span{font-size:11px;color:#657784}
#panorama-dialog .flow-stat-row .metric-warning strong{color:#9b7011}
.flow-elapsed{font-size:11px;color:#657784;white-space:nowrap;text-align:right}
.flow-elapsed strong{font-weight:500;color:#435a6a}
.flow-elapsed>span{display:block;font-size:10px;margin-top:4px;color:#7e8e99}
#panorama-dialog .flow-step-strip{min-height:23px}
#panorama-dialog .step-segment{border-color:var(--node-border);min-height:23px;padding:4px 0}
#panorama-dialog .step-segment.tone-active{border:2px solid var(--node-color);padding:3px 0}
#panorama-dialog .flow-current{margin-top:9px;padding:0;border:0;gap:6px;max-height:70px;overflow:auto}
#panorama-dialog .flow-current-chip{border-color:var(--node-border);background:var(--node-bg);color:var(--node-ink);padding:5px 8px;font-size:10px}
#panorama-dialog .flow-current-chip:hover{outline:1px solid var(--node-color)}
#panorama-dialog .panorama-panel{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;border:0;border-radius:0;overflow:hidden}
#panorama-dialog .panorama-toolbar{padding:10px 24px;flex-shrink:0}
#panorama-dialog .diagram-legend{padding:10px 24px;gap:16px;font-size:11px;flex-shrink:0;border:0}
#panorama-dialog .diagram-legend i{width:15px;height:15px;display:grid;place-items:center;border:1px solid var(--node-color);border-radius:3px;font-size:10px;font-style:normal;line-height:1;font-weight:700}
#panorama-dialog .diagram-legend i.tone-active{border-width:2px}
#panorama-dialog .diagram-legend .edge-key{font-size:10px}
#panorama-dialog .diagram-instructions{padding:7px 24px;border-top:1px solid #edf1f4;flex-shrink:0}
#panorama-dialog .diagram-viewport{flex:1;height:auto;min-height:0}
.diagram-node.is-current{box-shadow:inset 0 0 0 1px var(--node-color)}
.diagram-node.is-blocked{border-top:3px solid var(--node-color);padding-top:8px}
#panorama-dialog .diagram-node.is-located{outline:3px solid #526c89;outline-offset:4px}
#panorama-dialog .diagram-state{color:var(--node-ink);border-color:var(--node-border);background:#ffffff70}
.diagram-node.tone-active{box-shadow:inset 0 0 0 1px var(--node-color),0 4px 12px #0f766e18}
#panorama-dialog .diagram-node.tone-active .diagram-state{background:var(--node-color);border-color:var(--node-color);color:#fff;font-weight:650}

#panorama-dialog .diagram-date.is-late{color:#8a6412}
#panorama-dialog .tone-severe .diagram-date.is-late{color:#a53d35}
.diagram-status-pill{display:inline-flex;gap:4px;align-items:center;border:1px solid var(--node-border);border-radius:4px;padding:1px 5px;font-size:10px;margin-top:3px;white-space:nowrap}
#panorama-dialog .timing-help{padding:9px 24px;flex-shrink:0;max-height:140px;overflow:auto}
#panorama-dialog .timing-help summary{color:#3d6288}
#panorama-dialog .panorama-panel>.table-wrap{flex:1;min-height:0;overflow:auto}
#panorama-dialog .timing-table th{position:sticky;top:0;z-index:1}
#panorama-dialog .timing-table small.is-late{color:#8a6412}
@media(max-width:1100px){
  .flow-metrics{gap:18px}.flow-progress-caption{display:block}.flow-progress-caption>span{display:block}
  #panorama-dialog .flow-stat-row{gap:21px}#panorama-dialog .flow-stat-row>div{display:block}#panorama-dialog .flow-stat-row span{display:block;margin-top:2px}
  .flow-elapsed{font-size:10px}#panorama-dialog .diagram-legend{gap:11px}
}
@media(max-width:760px){
  .panorama-shell-header{padding:11px 13px;gap:8px}.panorama-heading{gap:8px}.panorama-heading-icon{display:none}
  .panorama-heading h2{font-size:16px}.panorama-heading h2 span{display:block;font-size:11px;margin:2px 0 0}
  .panorama-heading p{font-size:9px;max-width:245px;margin-top:2px}.panorama-shell-header>.btn{padding:7px 9px;font-size:11px;min-height:34px}.panorama-shell-header kbd{display:none}.panorama-shell-header svg{width:15px;height:15px}
  #panorama-dialog .flow-overview{padding:10px 13px}.flow-metrics{gap:12px;align-items:center;margin-bottom:0}
  .flow-progress-caption>strong{font-size:23px}.flow-progress-caption small{font-size:12px}.flow-progress-caption>span{font-size:9px}
  #panorama-dialog .flow-stat-row{gap:11px;justify-content:space-between}#panorama-dialog .flow-stat-row strong{font-size:19px}#panorama-dialog .flow-stat-row span{font-size:10px}
  #panorama-dialog .flow-elapsed,#panorama-dialog .flow-step-strip,#panorama-dialog .flow-current{display:none}
  #panorama-dialog .panorama-toolbar{padding:8px 12px;gap:7px}.panorama-controls{gap:4px}.panorama-controls .btn{padding:5px 7px;font-size:10px;min-height:29px}
  .zoom-controls{margin:0}.zoom-controls button{min-width:26px;min-height:28px}.zoom-controls output{min-width:35px;font-size:10px}
  #panorama-dialog .diagram-legend{padding:8px 12px;gap:7px 11px;font-size:9px}#panorama-dialog .diagram-legend i{width:12px;height:12px;font-size:8px}#panorama-dialog .diagram-legend .edge-key{display:none}
  #panorama-dialog .diagram-instructions{padding:6px 12px;gap:7px;font-size:9px;flex-direction:row;align-items:center}.diagram-instructions>span{max-width:145px}.diagram-instructions select{max-width:150px;font-size:10px}
  #panorama-dialog .timing-help{padding:8px 12px;font-size:10px;max-height:130px}
}

/* A completed run belongs to one column; the rear sheets stay inside its bounds. */
.diagram-stage{position:absolute;z-index:1;padding:0;border:0;background:transparent;text-align:left;color:#426f9f;cursor:pointer;border-radius:9px}
.diagram-stage.is-stacked::before,.diagram-stage.is-stacked::after{content:"";position:absolute;border:1px solid #b3cbe6;border-radius:8px;background:#e4effc;pointer-events:none}
.diagram-stage.is-stacked::before{inset:6px 6px 6px;z-index:1}.diagram-stage.is-stacked::after{inset:12px 12px 0;z-index:0;background:#dce9f8}
.stage-front{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:7px;padding:12px 14px;border:1px solid #aec7e4;border-radius:8px;background:#edf5ff;box-shadow:0 3px 8px #315b8110}
.is-stacked .stage-front{bottom:12px}
.diagram-stage:hover .stage-front{border-color:#628ebc;background:#e7f1ff}
.diagram-stage:focus-visible{outline:3px solid #4c7fb5;outline-offset:4px}
.stage-kicker{display:flex;align-items:center;gap:6px;font-size:10px;color:#6485a6;white-space:nowrap}.stage-check{display:grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1px solid #9bb9d9;font-size:10px}.stage-total{margin-left:auto;border:1px solid #b6cce4;background:#f7faff;border-radius:4px;min-width:21px;padding:2px 5px;text-align:center;font-variant-numeric:tabular-nums}
.stage-front>strong{font-size:15px;font-weight:600;line-height:1.4}.stage-caption{font-size:10px;color:#718daa;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.stage-footer{display:flex;justify-content:space-between;margin-top:auto;font-size:10px;color:#547fa9;line-height:1.2}.stage-footer>span{font-size:14px;line-height:1}
.diagram-stage.is-expanded .stage-front{flex-direction:row;align-items:center;justify-content:space-between;gap:6px;padding:8px 11px;background:#f4f8fd;border-style:dashed;box-shadow:none}.diagram-stage.is-expanded strong{font-size:11px}.stage-toggle{font-size:10px;white-space:nowrap}
.diagram-stage.is-inactive-stack{color:#758795}.is-inactive-stack .stage-front{background:#f3f6f8;border-color:#ccd7df}.is-inactive-stack.is-stacked::before,.is-inactive-stack.is-stacked::after{background:#e9eef2;border-color:#ccd7df}
.is-column-layout .diagram-edge.is-context path{opacity:.23}.is-column-layout .diagram-edge.is-complete path{opacity:.35}.is-column-layout .diagram-edge.is-highlighted path{opacity:1}
@media(prefers-reduced-motion:no-preference){.stage-front{transition:transform .14s ease,border-color .14s ease,background .14s ease}.diagram-stage.is-stacked:hover .stage-front{transform:translateY(-2px)}}

/* Relationship inspection keeps workflow state colors on cards. */
.is-column-layout:not(.show-all-lines) .diagram-edge path{opacity:.12}
.is-column-layout:not(.show-all-lines) .diagram-edge.is-context path{opacity:0}
.is-column-layout .diagram-edge.is-highlighted path{opacity:1;stroke-width:2.5}
.is-column-layout .diagram-edge.is-upstream path{stroke:#446d9a}
.is-column-layout .diagram-edge.is-downstream path{stroke:#0f766e}
.is-column-layout .diagram-edge.is-upstream text{fill:#446d9a}
.is-column-layout .diagram-edge.is-downstream text{fill:#0f766e}
.diagram-node.is-relation-selected{outline:2px solid #526c89;outline-offset:4px;z-index:2}
.diagram-node:is(.tone-waiting,.tone-ready).is-relation-related{opacity:.9}
.diagram-node:is(.tone-waiting,.tone-ready).is-relation-selected{opacity:1}
.diagram-stage.is-relation-selected .stage-front{border-color:#526c89}
.relation-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.65fr) minmax(0,1fr) auto;gap:18px;height:88px;flex-shrink:0;padding:6px 24px;border-bottom:1px solid #dce5ec;background:#fff;box-sizing:border-box;overflow:hidden}
.relation-preview-empty{grid-column:1/-1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:#71828e;font-size:12px}
.relation-preview-empty strong{font-size:13px;font-weight:550;color:#536d7c}
.relation-preview-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;font-weight:600;color:#536d7c;margin-bottom:5px;white-space:nowrap}
.relation-preview-label>span{font-size:10px;font-weight:400;color:#71828e}
.is-before .relation-preview-label{color:#446d9a}.is-after .relation-preview-label{color:#0f766e}
.relation-preview-links{display:flex;gap:6px;align-items:center;min-width:0;overflow-x:auto}
.relation-preview-current{min-width:0;border-left:2px solid #a3b4c5;padding-left:13px;display:flex;flex-direction:column;gap:3px}
.relation-preview-current>strong{font-size:13px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.relation-preview-current>span:last-child{font-size:10px;color:#657784;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.relation-preview-actions{display:flex;flex-direction:column;align-items:center;gap:3px}
.relation-preview-actions .btn{min-height:28px;font-size:11px;padding:4px 10px}
.relation-text-button{border:0;background:none;color:#446d9a;font-size:10px;padding:2px 5px;cursor:pointer}
.relation-text-button:hover{text-decoration:underline}
.relation-more{font-size:10px;color:#71828e;min-width:52px}
.relation-link{width:100%;display:flex;align-items:center;gap:9px;text-align:left;border:1px solid #dce5ec;background:#f8fafc;padding:9px 10px;border-radius:6px;color:#263e4d;cursor:pointer;min-width:0}
.relation-link:hover{background:#edf4f8;border-color:#8aa7c2}
.relation-link:focus-visible,.relation-text-button:focus-visible{outline:2px solid #446d9a;outline-offset:2px}
.relation-link.is-compact{flex:1;min-width:100px;padding:6px 7px;gap:5px;background:#f8fafc}
.relation-link-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.relation-link-main strong{font-size:12px;line-height:1.4;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.relation-link-main small{font-size:10px;color:#657784;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-compact .relation-link-main strong{font-size:11px}.is-compact .relation-link-main small{font-size:9px}
.relation-check{flex-shrink:0;font-size:13px;color:#899ba9}.relation-check.is-met{color:#446d9a}
.relation-go{flex-shrink:0;color:#6f8aa3;font-size:12px}
.task-relations{padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid #dce5ec}
.relation-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 8px}
.relation-section-head:first-child{margin-top:0}
.relation-section-head h3{margin:0;font-size:13px;font-weight:600}
.relation-section-head>span{font-size:11px;color:#657784;white-space:nowrap}
.relation-list{display:flex;flex-direction:column;gap:6px;max-height:210px;overflow:auto;padding:3px}
.relation-empty,.relation-note{color:#71828e;font-size:11px;line-height:1.6;margin:7px 0}
.relation-context{margin-top:14px;padding:9px 11px;border:1px dashed #c4d1db;border-radius:6px;font-size:11px}
.relation-context summary{cursor:pointer;color:#536d7c}.relation-context p{margin:8px 0 5px}
@media(max-width:1100px){.relation-preview{gap:10px;padding-inline:14px;grid-template-columns:minmax(0,1fr) minmax(135px,.75fr) minmax(0,1fr) auto}.relation-preview-label{display:block}.relation-preview-label>span{margin-left:5px}}
@media(max-width:760px){
  .relation-preview{height:156px;padding:8px 12px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:98px 28px;gap:7px}
  .relation-preview-empty{grid-row:1/-1;text-align:center;line-height:1.6;padding:10px}
  .relation-preview-label{font-size:10px;white-space:normal;line-height:1.5;margin:0 0 4px}.relation-preview-label>span{display:block;margin-left:0;font-size:9px}
  .relation-preview-current{padding-left:7px}.relation-preview-current>strong{font-size:11px}.relation-preview-current>span:last-child{font-size:9px;white-space:normal}
  .relation-preview-actions{grid-column:1/-1;flex-direction:row;justify-content:flex-end;gap:12px}
  .relation-link.is-compact{min-width:0;flex:0 0 100%;padding:5px}.is-compact .relation-check,.is-compact .relation-go,.relation-preview-links>.relation-more{display:none}
  .is-compact .relation-link-main strong{font-size:10px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .relation-preview .relation-empty{font-size:10px}.relation-preview-current .relation-preview-label{min-height:30px}
}

.is-column-layout .diagram-edge.is-context.is-highlighted path{stroke:#7a8795}
.is-column-layout .diagram-edge.is-context.is-highlighted text{fill:#627785}
.is-column-layout:not(.show-all-lines) .diagram-edge.is-highlighted path{opacity:1}
.diagram-node:is(.tone-waiting,.tone-ready).is-relation-related:is(:hover,:focus,.is-located){opacity:1}