/* Reviewed workflow presentation. Gallery page layout remains with the consumer. */
.nf-port{position:absolute;z-index:4;box-shadow:none!important;cursor:crosshair}
.nf-port::before{content:"";position:absolute;inset:1px;border:1px solid var(--nf-node-outline,var(--color-border));border-radius:50%;background:var(--color-card);pointer-events:none}
.nf-port::after{content:"";position:absolute;top:1px;bottom:1px;width:12px;background:var(--color-card);pointer-events:none}
.nf-port-input::after{right:0}
.nf-port-output::after{left:0}
.nf-port-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;margin:0;border-radius:50%;background:var(--color-muted-foreground);z-index:1;pointer-events:none}
.nf-icon-frame{position:relative;box-sizing:border-box;width:40px;height:40px;border-radius:11px;border:1px solid var(--color-border);display:grid;place-items:center;flex-shrink:0}
.nf-icon-frame>svg{display:block;width:20px;height:20px}
.nf-identity{background:var(--color-muted)}
.nf-port-rows{padding:4px 0 8px;border-top:1px solid var(--color-border)}
.nf-port-row{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;height:30px;padding:0 20px;font-size:10px;color:var(--color-muted-foreground)}
.nf-port-row-output-label{text-align:right}
.nf-copy{min-width:0;flex:1}
.nf-copy strong{display:block;font-size:13px;font-weight:600;letter-spacing:-.015em}
.nf-copy small{display:block;font-size:11px;color:var(--color-muted-foreground);margin-top:4px}
.nf-node{position:relative;width:300px;max-width:100%;padding-top:44px;padding-bottom:8px}
.nf-node-body{border-radius:15px!important;border:1px solid var(--nf-node-outline,var(--color-border))!important;background:var(--color-card)!important;outline:none;box-shadow:0 6px 14px -10px #0004}
.nf-node-content{min-height:78px;display:flex;gap:12px;align-items:center;padding:14px}
.nf-selected{--nf-node-outline:var(--color-primary);outline:none!important;box-shadow:0 6px 20px -10px color-mix(in oklab,var(--color-primary) 50%,transparent)}
.nf-disabled{opacity:.45;border-style:dashed!important}
.nf-trigger{position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;border-radius:7px;color:#a16207;background:#fef3c7;border:1px solid #fcd34d;z-index:3}
.nf-execution{color:var(--color-muted-foreground);background:var(--color-muted)}
.nf-success{color:#047857;background:#d1fae5;border-color:#a7f3d0}
.nf-error{color:#be123c;background:#ffe4e6;border-color:#fecdd3}
.nf-waiting{color:#a16207;background:#fef3c7;border-color:#fde68a}
.nf-running{color:#0284c7;background:#e0f2fe;border-color:#7dd3fc}
.nf-live-label{position:absolute;top:calc(100% + 2px);left:0;right:0;text-align:center;font-size:7px;font-weight:750;letter-spacing:.08em;color:#0284c7}
/* Animate the shared outline color itself: the card and every port curve
   inherit one pulse, so no separate rectangle cuts across the silhouette. */
@property --nf-running-outline{syntax:'<color>';initial-value:#38bdf8;inherits:true}
.nf-running-border{--nf-node-outline:var(--nf-running-outline);animation:nf-outline-pulse 1.5s ease-in-out infinite}
@keyframes nf-outline-pulse{0%,100%{--nf-running-outline:#0284c7}50%{--nf-running-outline:#7dd3fc}}
@media(prefers-reduced-motion:reduce){.nf-running-border{animation:none;--nf-running-outline:#0284c7}
}
.nf-slot{box-sizing:border-box;display:inline-grid;place-items:center;width:40px;height:40px;flex-shrink:0;padding:0;border:1px dashed var(--color-muted-foreground);border-radius:11px;color:var(--color-muted-foreground);background:var(--color-background)}
.nf-slot>svg{display:block;width:20px;height:20px}
.nf-slot-filled{border-style:solid;border-color:var(--color-border);color:var(--color-foreground);background:var(--color-muted)}
button.nf-slot{cursor:pointer}
button.nf-slot:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.nf-attachments{display:flex;gap:8px;padding:10px 12px 0;flex-wrap:wrap}
.nf-occupancy{display:inline-flex;gap:5px;align-items:center;border:1px solid #fcd34d;background:#fffbeb;color:#92400e;padding:4px 8px;border-radius:20px;font-size:10px;white-space:nowrap}
.nf-occupancy-active{border-color:#7dd3fc;background:#f0f9ff;color:#075985}
button.nf-occupancy{font-family:inherit;cursor:pointer}
button.nf-occupancy:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.nf-node-footer{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-height:28px;padding-top:9px}
.nf-duration{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--color-muted-foreground);margin-left:auto;white-space:nowrap}
.nf-validation{display:flex;align-items:center;gap:5px;font-size:10px;color:#b45309}
.nf-actions{position:absolute;right:-1px;top:0;transform:translateY(-100%);z-index:6;
--ed-ring:var(--color-primary);--ed-ring-struct:var(--color-primary);--ed-icon:var(--color-primary-foreground);
--ed-ring-hover:color-mix(in oklab,var(--color-primary) 85%,black);--ed-ring-struct-hover:color-mix(in oklab,var(--color-primary) 85%,black)}
.nf-actions [data-selection-action-bar]{position:relative;z-index:auto}
.nf-node-body:has(>.nf-actions){border-top-right-radius:0!important}
.nf-output-label{position:absolute;right:16px;font-size:9px;transform:translateY(-50%);color:var(--color-muted-foreground)}
.nf-node-main,.nf-node-content{position:relative}
.nf-node-circle .nf-node-main{height:100%}
.nf-primary-ports{position:absolute;inset:0;pointer-events:none}
.nf-primary-ports>.nf-port{pointer-events:auto}
.nf-node-content:has(.nf-primary-ports[data-multiple-outputs="true"]){min-height:96px}
.nf-waiting-tab{position:absolute;left:-1px;top:0;transform:translateY(-100%);z-index:6}
.nf-waiting-readout[data-selection-action-bar]{position:relative;z-index:auto;transform:scaleX(-1);--ed-ring:#fbbf24;--ed-ring-struct:#fbbf24;--ed-icon:#78350f}
.nf-waiting-readout[data-selection-action-bar]>.nf-waiting-content{display:flex;align-items:center;gap:5px;width:auto;padding:0 9px;font-size:11px;white-space:nowrap;transform:scaleX(-1)}
.nf-node-body:has(>.nf-waiting-tab){border-top-left-radius:0!important}
.nf-slot-anchor{position:relative;display:inline-flex;width:40px;height:40px;flex-shrink:0}
.nf-attachment-port::before{content:"";position:absolute;inset:1px;border:1px solid var(--nf-node-outline,var(--color-border));border-radius:50%;background:var(--color-card);pointer-events:none}
.nf-attachment-port .nf-port-core{width:9px;height:9px}
.nf-port-input .nf-port-core{width:5px;height:15px;border-radius:1px}
.nf-port-input::before,.nf-port-input::after{display:none}
.nf-attachment-port{z-index:4;cursor:crosshair}
.nf-attachment-port::after{content:"";position:absolute;left:1px;right:1px;height:12px;background:var(--color-card);pointer-events:none}
.nf-attachment-port-input::after{top:0}
.nf-attachment-port-output::after{bottom:0}
.nf-bottom-ports{position:absolute;bottom:-1px;left:12px;width:40px;height:0}
.nf-attachments{gap:16px}
.nf-attachment-position{display:inline-flex;width:40px;height:40px;flex-shrink:0}
.nf-bottom-ports{display:flex;gap:16px;width:max-content;min-width:40px}
.nf-bottom-port-anchor{position:relative;display:block;width:30px;height:0;flex-shrink:0}
.nf-node-circle .nf-node-body{width:80px;height:80px;margin-inline:auto;border-radius:50%!important}
.nf-node-circle .nf-node-content{height:100%;min-height:0;padding:0;justify-content:center}
.nf-node-circle .nf-node-footer{justify-content:center;padding-top:12px}
.nf-bottom-ports:has(>.nf-bottom-port-anchor){left:18px;gap:0;min-width:0}
.nf-active-bubble{position:absolute;left:50%;top:-8px;transform:translate(-50%,-100%);z-index:6}
.nf-node:has(.nf-active-bubble):has(.nf-actions[data-extended="true"]){width:360px}
/* React Flow anchors edges to the visible port; hit targets and socket
   outlines stay 24px without shifting the line endpoints. */
.nf-port-hit-area{position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%);pointer-events:auto}
.react-flow__handle.nf-port::before,.react-flow__handle.nf-attachment-port::before{inset:auto;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%)}
.react-flow__handle.nf-port-output::after{left:calc(50% - 12px);top:50%;bottom:auto;width:12px;height:22px;transform:translateY(-50%)}
.react-flow__handle.nf-attachment-port-output::after{left:50%;right:auto;bottom:calc(50% - 12px);width:22px;height:12px;transform:translateX(-50%)}
.nf-node[data-execution="success"]>.nf-node-body{--nf-node-outline:var(--color-emerald-500,#10b981)}
.nf-node[data-execution="error"]>.nf-node-body{--nf-node-outline:var(--color-rose-500,#f43f5e)}
.react-flow__handle.nf-attachment-port-input::after{left:50%;right:auto;top:calc(50% - 12px);width:22px;height:12px;transform:translateX(-50%)}
.nf-node-details{display:flex;align-items:flex-start;gap:8px}
.nf-node-details>.nf-attachments{flex-shrink:0}
.nf-node-details>.nf-node-footer{flex:1;min-width:0}
/* Outline only the exposed faces of the amber waiting tab. The mirrored
   wing and straight faces inherit the same selected/running/result border. */
.nf-waiting-readout[data-selection-action-bar][data-pill-tier="struct"]::after{content:"";position:absolute;inset:0 0 0 5px;border:0;border-top:1px solid var(--nf-node-outline,var(--color-border));border-right:1px solid var(--nf-node-outline,var(--color-border));pointer-events:none}
.nf-waiting-wing-outline{position:absolute;left:-12px;top:0;overflow:visible;stroke:var(--nf-node-outline,var(--color-border));stroke-width:1;pointer-events:none}
.nf-warning-banner{padding:8px 14px;background:#ffedd5;color:#9a3412;border-bottom:1px solid #fdba74;border-radius:14px 14px 0 0}
.nf-warning-banner .nf-validation{color:inherit;font-size:11px;line-height:16px}
.nf-node-body:has(>.nf-waiting-tab)>.nf-warning-banner{border-top-left-radius:0}
.nf-node-body:has(>.nf-actions)>.nf-warning-banner{border-top-right-radius:0}
.nf-pass-through{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:5}

/* Compact trigger: one icon surface, with the same socket and outline geometry. */
.nf-node-icon{width:64px}
.nf-node-disclosure{position:absolute;top:calc(100% - 4px);left:0;width:100%;z-index:20;overflow:hidden;border:1px solid var(--color-border);border-radius:10px;background:var(--color-card);color:var(--color-card-foreground);box-shadow:0 6px 14px -10px #0004}
/* Off-canvas the panel is a sibling in normal flow, so it claims its own
   height instead of covering the next row. */
.nf-node-disclosure-flow{position:static;width:auto;margin-top:6px;box-shadow:none}
.nf-node-disclosure-toggle{cursor:pointer;color:inherit}
.nf-node-disclosure-toggle[data-size="compact"]{width:28px;height:28px;border-radius:8px}
.nf-node-disclosure-toggle[data-size="compact"]>svg{width:14px;height:14px}
.nf-node-disclosure-toggle:hover{background:var(--color-accent)}
.nf-node-disclosure-toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
.nf-node-disclosure-toggle[aria-expanded=true]>svg{transform:rotate(180deg)}
.nf-node-icon .nf-node-content{min-height:62px;padding:0;display:grid;place-items:stretch}
.nf-trigger-button{display:grid;place-items:center;width:100%;height:62px;padding:0;border:0;border-radius:14px;color:inherit;background:transparent;cursor:pointer;touch-action:none}
.nf-trigger-button:hover:not(:disabled){background:var(--color-accent)}
.nf-trigger-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.nf-trigger-button:disabled{cursor:default}
.nf-trigger-button>svg,.nf-trigger-button>img{pointer-events:none}

/* Named triggers use the same identity spacing as execution cards. */
.nf-node-content:has(>.nf-trigger-button[data-has-name="true"]){padding:0}
.nf-trigger-button[data-has-name="true"]{display:flex;gap:12px;min-height:78px;height:auto;padding:14px;text-align:left;font:inherit}
.nf-trigger-button[data-has-name="true"]>.nf-copy{overflow-wrap:anywhere}