/* Visual application workspace: shared operational theme, compact panels. */
#application-design.av-active>.journey-head{display:grid;grid-template-columns:minmax(240px,1fr) auto auto;gap:12px;padding:6px 12px;margin-bottom:6px;min-height:0}
#application-design.av-active>.journey-head .design-steps{margin:0;border:0;background:transparent}
#application-design.av-active>.journey-head .design-steps li{padding:3px 12px;gap:7px}
#application-design.av-active>.journey-head .design-steps li>span{width:24px;height:24px}
#application-design.av-active>.journey-head .design-steps small{display:none}
#application-design.av-active>.journey-head .design-simon-logo{width:26px;height:26px}
#application-design.av-active>.journey-head .design-back{min-height:34px;padding:5px 10px}
#application-design.av-active>.journey-head h1{font-size:17px;margin:0;line-height:1.4}
#application-design.av-active>.journey-head p,#application-design.av-active>.journey-head .journey-eyebrow{display:none}
#application-design.av-active [data-journey-message]:empty{display:none}
.av-active .av-heading{padding:10px 12px}
.av-active .av-heading .journey-eyebrow{display:none}
.av-active .av-heading h2{font-size:15px;margin:0}
.av-active .av-toolbar{gap:6px;padding:8px 12px}
.av-active .av-toolbar [data-av="export"]{margin-left:auto}
.av-active .av-project-settings{border:1px solid var(--j-line);margin:8px 0;padding:8px;flex-shrink:0}
.av-active .av-project-settings>summary{font-weight:600;cursor:pointer}
.av-active .av-project-settings[open]>summary{margin-bottom:10px}
.av-active .design-editor .design-forms-title{font-size:12px;margin:0 0 10px;color:var(--j-muted)}
.av-active .design-editor .design-form{border:0;padding:0;margin:0}
.av-active .design-editor .design-section-heading{margin-bottom:8px}
.av-active .design-editor .design-section-heading h2{font-size:14px;overflow-wrap:anywhere}
.av-active .design-editor [data-dirty]{margin:0 0 8px;font-size:11px}
.av-active .design-editor>p.journey-muted{font-size:11px}
@layer sysimple-actions{#application-design .design-editor [data-action="add-form"][hidden]{display:none!important}}
.av-command-icon{display:inline-block;vertical-align:middle;width:16px;height:16px;flex-shrink:0;pointer-events:none}
#application-design .av-workspace [data-action="add-form"]::before{content:none}
.av-command-icon.av-simon-logo{width:20px;height:20px;object-fit:contain}
.av-node [data-av="connect"]{touch-action:none;cursor:crosshair}
@layer sysimple-actions{#application-design .av-node .av-node-foot .av-node-delete{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:26px!important;padding:3px!important;color:var(--adm-danger,#dd4b39)!important}#application-design .av-node .av-node-delete[hidden]{display:none!important}}
.av-link-preview{fill:none;stroke:var(--j-accent);stroke-width:2;stroke-dasharray:6 4;pointer-events:none}
.av-node.av-link-target{outline:2px solid var(--j-accent);outline-offset:3px}
.av-link-picker{position:fixed;z-index:1600;width:320px;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;box-sizing:border-box;padding:12px;background:var(--j-surface);color:var(--j-text);border:1px solid var(--j-line);border-top:3px solid var(--j-accent);box-shadow:0 8px 24px #0004}
.av-link-picker header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.av-link-picker[popover]{margin:0;inset:auto;overscroll-behavior:contain}
.av-link-picker [data-link-drag]{position:sticky;top:-12px;z-index:1;padding:8px 0;background:var(--j-surface);cursor:move;touch-action:none;user-select:none}
.av-link-picker [data-link-drag]:focus-visible{outline:2px solid var(--j-accent);outline-offset:2px}
.av-link-picker [data-link-drag] button{cursor:pointer}
.av-link-picker label{display:block;margin:6px 0}
.av-link-picker label select{display:block;width:100%;min-width:0;margin-top:3px}
.av-link-picker p{font-size:12px;overflow-wrap:anywhere;color:var(--j-muted)}
@layer sysimple-actions{#application-design .av-link-picker>[data-link-kind]{display:flex!important;flex-direction:column;align-items:flex-start!important;text-align:left!important;white-space:normal!important;width:100%;height:auto!important;min-height:54px!important;padding:8px!important;margin-top:6px;gap:4px;border-radius:0!important;background:var(--j-secondary)!important;color:var(--j-text)!important;border:1px solid var(--j-line)!important}#application-design .av-link-picker>[data-link-kind]:hover:not(:disabled){border-color:var(--j-accent)!important}#application-design .av-link-picker small{font-weight:normal;font-size:12px;line-height:1.4}}
.av-toolbar>button,.av-form-settings>[data-av="ask-fields"]{display:inline-flex;align-items:center;justify-content:center;gap:6px}
#application-design.av-active{max-width:none}
#application-design.av-active .design-layout{grid-template-columns:190px minmax(440px,1fr) 350px;gap:14px}
.av-active .design-projects{grid-column:1;grid-row:1/3}
.av-active .av-workspace{grid-column:2;grid-row:1;min-width:0;padding:0;overflow:hidden;border-top:3px solid var(--j-accent)}
.av-active .design-editor{grid-column:3;grid-row:1/3;max-height:calc(100vh - 190px);overflow:auto;scrollbar-width:thin}
.av-active .design-conversation{grid-column:2;grid-row:2;min-width:0}
.av-active .design-chat{max-height:230px}
.av-active .design-conversation textarea{min-height:65px}
.av-active .design-projects .design-list{display:grid;max-height:65vh;overflow:auto}
.av-active .design-projects .design-list button{width:100%;min-width:0}
.av-active .design-projects .journey-actions{flex-wrap:wrap}
.av-active .design-editor>.design-section-heading h2{font-size:16px}
.av-active .design-editor .design-forms-title{font-size:15px}
.av-active .design-form{margin-top:10px}
.av-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid var(--j-line)}
.av-heading h2{font-size:17px;margin:4px 0 0;overflow-wrap:anywhere}
.av-status{font-size:11px;padding:4px 8px;border:1px solid var(--j-line);color:var(--j-muted);background:var(--j-secondary)}
.av-toolbar,.av-tabs,.av-legend,.av-linkbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--j-line);background:var(--j-secondary)}
.av-toolbar button,.av-tabs button,.av-legend button{min-height:34px;font-size:12px;padding:6px 10px}
.av-tabs{gap:0;background:var(--j-surface);padding-bottom:0}
.av-tabs button{border:0!important;background:transparent!important;border-radius:0!important;border-bottom:3px solid transparent!important;box-shadow:none!important;color:var(--j-muted)!important}
.av-tabs button[aria-pressed=true]{border-bottom-color:var(--j-accent)!important;color:var(--j-text)!important;font-weight:700}
.av-scroll{height:480px;overflow:auto;background:var(--j-bg,var(--adm-bg));scrollbar-width:thin;overscroll-behavior:contain}
.av-canvas{position:relative;min-width:100%;min-height:100%}
.av-plane{position:relative;transform-origin:0 0;background-image:radial-gradient(var(--j-line) 1px,transparent 1px);background-size:20px 20px}
.av-lines{position:absolute;inset:0;overflow:visible;pointer-events:none;color:var(--j-accent)}
.av-edge{pointer-events:stroke;cursor:pointer;outline:none}
.av-edge path{fill:none;stroke:var(--j-accent);stroke-width:1.8}
.av-edge.relation path{stroke-dasharray:6 5;stroke:var(--design-purple);color:var(--design-purple)}
.av-edge text{fill:var(--j-muted);font:11px system-ui;paint-order:stroke;stroke:var(--j-bg,var(--adm-bg));stroke-width:4px;stroke-linejoin:round}
.av-edge:hover path,.av-edge:focus path{stroke-width:4}
.av-node{position:absolute;width:240px;height:140px;box-sizing:border-box;display:flex;flex-direction:column;background:var(--j-surface);border:1px solid var(--j-line);border-top:3px solid var(--j-accent);box-shadow:0 3px 10px #00000012;border-radius:3px}
.av-node.selected{outline:2px solid var(--j-accent);outline-offset:3px}
.av-node.linking{outline:2px dashed var(--design-orange);outline-offset:3px}
.av-node-top{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 0;color:var(--j-muted);font-size:9px;letter-spacing:.07em}
.av-node-top button{min-height:26px;padding:0 7px;background:transparent!important;border:0!important;cursor:grab;touch-action:none;font-size:20px;color:var(--j-muted)!important}
.av-node-title{display:block;width:100%;text-align:left;padding:3px 12px!important;background:transparent!important;border:0!important;font-weight:700;font-size:14px;color:var(--j-text)!important;white-space:normal;overflow-wrap:anywhere}
.av-node-title .av-card-icon{display:inline-block;width:22px;height:22px;vertical-align:middle;margin:0 7px 2px 0;color:var(--j-accent);pointer-events:none}
.av-module-node .av-node-title .av-card-icon{color:var(--j-module)}
.av-workflow-node .av-node-title .av-card-icon{color:var(--j-workflow)}
.av-reference-node .av-node-title .av-card-icon{color:var(--adm-success,var(--j-accent))}
.av-node-meta{padding:0 12px 9px;font-size:11px;color:var(--j-muted)}
.av-node-foot{display:flex;align-items:center;justify-content:space-between;background:var(--j-secondary);padding:4px 8px;border-top:1px solid var(--j-line);font-size:10px;margin-top:auto}
.av-node-foot button{padding:2px 6px;min-height:26px;font-size:11px}
.av-legend{border-bottom:0;border-top:1px solid var(--j-line);font-size:11px;color:var(--j-muted);gap:10px}
.av-legend span:nth-child(2){color:var(--design-purple)}
.av-legend button:first-of-type{margin-left:auto}
.av-linkbar{font-size:12px;border-left:3px solid var(--design-orange)}
.av-linkbar select{width:auto;max-width:100%;min-height:34px}
.av-empty{padding:60px 30px;color:var(--j-muted);text-align:center;max-width:600px}
.av-empty>span{font-size:44px;color:var(--j-accent)}
.av-empty h3{color:var(--j-text)}
.av-form-settings{padding:8px;border:1px solid var(--j-line);background:var(--j-surface)}
.av-form-settings label,.av-field-source label{font-size:12px}
.av-field-source{border-left:2px solid var(--design-purple);padding-left:10px}
.av-field-source small{display:block;color:var(--j-muted);font-size:11px;margin-top:6px}
.av-page-editor{border-top:1px solid var(--j-line);margin-top:18px;padding-top:10px}
.av-page-editor p{font-size:12px;color:var(--j-muted)}
.av-page,.av-grid{padding:10px;border:1px solid var(--j-line);margin:10px 0;background:var(--j-secondary)}
.av-grid{border-left:3px solid var(--j-accent)}
.av-menu-preview{padding:18px;min-height:420px;max-height:550px;overflow:auto}
.av-menu-preview section{border-left:2px solid var(--j-accent);padding:8px 12px;margin:10px 0;background:var(--j-secondary)}
.av-menu-preview ul{padding-left:18px}
.av-menu-preview li{margin:7px 0;font-size:12px}
.av-source-head{display:flex;gap:10px;align-items:end;padding:12px}
.av-source-head label{flex:1}.av-source-head select{display:block;width:100%;min-height:34px;margin-top:5px}
.av-existing{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:400px;max-height:560px;overflow:auto;border-top:1px solid var(--j-line)}
.av-existing nav{border-right:1px solid var(--j-line);padding:8px;background:var(--j-secondary)}
.av-existing nav button{display:block;width:100%;margin-bottom:6px;text-align:left;white-space:normal}
.av-existing small{display:block;color:var(--j-muted);font-size:11px;margin-top:4px}
.av-existing>section{padding:14px;overflow-wrap:anywhere}
.av-existing details{border-bottom:1px solid var(--j-line);padding:10px 0}
.av-existing summary{cursor:pointer;font-weight:600}
.av-existing li{margin:8px 0;font-size:12px}
.av-existing .design-back{margin-top:8px;font-size:12px}
.av-question{padding:12px;margin-bottom:10px;border:1px solid var(--j-line);border-left:3px solid var(--design-purple);background:var(--j-secondary)}
.av-question>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.av-question button{font-size:12px}
.av-question label{display:block;margin-top:10px;font-size:12px}
.av-question input{width:100%;min-height:34px;margin:5px 0}
@media(min-width:1800px){#application-design.av-active .design-layout{grid-template-columns:210px minmax(600px,1fr) 390px}.av-scroll{height:550px}}
@media(max-width:1200px){#application-design.av-active .design-layout{grid-template-columns:minmax(0,1fr) 330px}.av-active .design-projects{grid-column:1/-1;grid-row:auto}.av-active .design-projects .design-list{display:flex;max-height:110px}.av-active .design-projects .design-list button{flex:0 0 190px}.av-active .av-workspace{grid-column:1;grid-row:2}.av-active .design-editor{grid-column:2;grid-row:2/4}.av-active .design-conversation{grid-column:1;grid-row:3}}
@media(max-width:800px){#application-design.av-active .design-layout{grid-template-columns:minmax(0,1fr)}.av-active .av-workspace,.av-active .design-editor,.av-active .design-conversation{grid-column:1;grid-row:auto}.av-active .design-editor{max-height:none}.av-scroll{height:390px}.av-existing{grid-template-columns:150px minmax(0,1fr)}.av-legend>span:nth-child(3){display:none}.av-toolbar{padding:8px}.av-toolbar button{flex-grow:1}.av-node-title{min-height:36px}.av-node-foot button{min-height:32px}}

/* Canvas cards use the same discreet drag affordance as structure fields.
   Keep these overrides in the shared action layer so global button sizes cannot
   turn a card title or handle into a full-size command. */
.av-node{height:128px;border-radius:0;box-shadow:0 2px 5px #00000010}
.av-node-top{padding:10px 12px 6px;min-height:22px;box-sizing:border-box}
.av-node-meta{padding:5px 12px 10px}
.av-node-foot{min-height:34px;box-sizing:border-box;padding:3px 8px 3px 12px}
@layer sysimple-actions{
#application-design .av-node button{border-radius:0!important;box-shadow:none!important;font-family:inherit!important}
#application-design .av-node .av-node-title{height:auto!important;min-height:0!important;max-height:44px;overflow:hidden;line-height:20px!important;padding:0 12px!important;border:0!important;background:transparent!important;color:var(--j-text)!important;text-align:left;font-size:13px!important}
#application-design .av-node .av-node-top button{position:absolute;left:-13px;top:9px;width:24px!important;height:28px!important;min-height:28px!important;min-width:24px!important;padding:0!important;display:grid;place-items:center;font-size:17px!important;border:1px solid var(--j-line)!important;background:var(--j-surface)!important;color:var(--j-muted)!important;opacity:0;cursor:grab;touch-action:none;z-index:2}
#application-design .av-node:is(:hover,:focus-within,.selected) .av-node-top button{opacity:1}
#application-design .av-node .av-node-top button:active{cursor:grabbing;color:var(--j-accent)!important}
#application-design .av-node .av-node-foot button{height:26px!important;min-height:26px!important;min-width:0!important;padding:2px 7px!important;font-size:11px!important;line-height:20px!important;border:1px solid transparent!important;background:transparent!important;color:var(--j-accent)!important}
#application-design .av-node .av-node-foot button:hover{border-color:var(--j-accent)!important;background:var(--j-secondary)!important}
#application-design .av-node button:focus-visible{outline:2px solid var(--j-accent)!important;outline-offset:2px}
@media(hover:none){#application-design .av-node .av-node-top button{opacity:1;left:-15px;width:30px!important;height:36px!important;min-height:36px!important}}
}
@layer sysimple-actions{#application-design .av-node button[hidden]{display:none!important}}

/* The diagram is the workspace; conversation and source details have their own homes. */
#application-design.av-active .design-layout{grid-template-columns:170px minmax(0,1fr) 300px;align-items:start}
.av-active .av-workspace{grid-row:1;display:flex;flex-direction:column;min-width:0}
.av-active .design-projects,.av-active .design-editor{grid-row:1}
.av-active .av-scroll{height:calc(100dvh - 310px);min-height:420px}
.av-active .design-editor{max-height:calc(100dvh - 160px)}
.av-active .design-conversation{position:fixed;right:0;top:var(--studio-header-h,70px);bottom:0;width:min(460px,100vw);box-sizing:border-box;z-index:1500;margin:0;display:flex;flex-direction:column;overflow:auto;border-radius:0;border-left:1px solid var(--j-line);box-shadow:-8px 0 24px #0003;background:var(--j-surface);animation:av-slide-in .18s ease-out}
.av-active .design-conversation[hidden]{display:none!important}
.av-active .design-conversation .design-section-heading{flex-shrink:0}
.av-active .design-conversation .design-section-heading>button{margin-left:auto;align-self:flex-start}
.av-active .design-conversation .design-chat{flex:1;min-height:140px;max-height:none;overflow:auto}
.av-active .design-editor.av-source-inspector>:not(.av-existing){display:none}
.av-active .av-existing{display:flex;flex-direction:column;min-height:0;max-height:none;border:0}
.av-active .av-existing nav{max-height:180px;overflow:auto;border:0;border-bottom:1px solid var(--j-line)}
.av-active .av-existing>section{padding:12px}
@keyframes av-slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.av-active .design-conversation{animation:none}}
@media(max-width:1100px){#application-design.av-active .design-layout{grid-template-columns:minmax(0,1fr) 280px}.av-active .design-projects{grid-column:1/-1;grid-row:1}.av-active .av-workspace{grid-column:1;grid-row:2}.av-active .design-editor{grid-column:2;grid-row:2}.av-active .design-projects .design-list{max-height:70px}}
@media(max-width:700px){#application-design.av-active .design-layout{grid-template-columns:minmax(0,1fr)}.av-active .design-editor{grid-column:1;grid-row:3;max-height:480px}.av-active .av-scroll{min-height:400px;height:60dvh}.av-active .design-conversation{width:100%;top:0}}
#application-design.av-active.av-wide .design-layout{grid-template-columns:minmax(0,1fr)}
.av-active.av-wide .design-projects,.av-active.av-wide .design-editor{display:none}
.av-active.av-wide .av-workspace{grid-column:1;grid-row:1}
.av-active.av-wide .av-scroll{height:calc(100dvh - 270px)}
/* All central tabs use the space below their actual header, including wrapped commands. */
#application-design.av-active .av-workspace > :is(.av-scroll,.av-menu-preview){height:var(--av-content-height,calc(100dvh - 310px));min-height:400px;max-height:none;box-sizing:border-box;flex:0 0 auto;overflow:auto}
.av-active .design-actions{position:static;box-shadow:none;display:flex;flex-wrap:wrap;gap:6px;padding:10px 0}
@layer sysimple-actions{
 #application-design .design-actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:6px}
 #application-design .design-actions .av-project-command{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-width:36px!important;min-height:36px!important;flex:0 0 auto!important;padding:6px 10px!important;gap:6px;margin:0!important;border-radius:0!important}
 #application-design .design-actions .av-project-command::before,#application-design .design-actions .av-project-command::after{content:none!important}
 #application-design .design-actions [data-action="delete-project"]{color:var(--adm-danger,#dd4b39)!important}
}
.av-active .design-editor .design-forms-title{font-size:12px}
.av-active .design-editor>.design-section-heading h2{font-size:14px}
.av-node[data-category="1"]{--av-category:var(--adm-danger,#dd4b39)}
.av-node[data-category="2"]{--av-category:var(--adm-warning,#f39c12)}
.av-node[data-category="0"]{--av-category:var(--adm-info,#3c8dbc)}
.av-node[data-category]{border-top:3px solid var(--av-category)}
.av-node[data-category] .av-node-top>span{border-left:3px solid var(--av-category);padding:3px 5px;background:color-mix(in srgb,var(--av-category) 14%,var(--j-surface));color:var(--j-text);font-size:9px;line-height:12px}
.av-node{width:300px}
.av-view-summary{height:22px;padding:0 10px}
.av-preview-body{display:flex;flex-direction:column;flex:1;min-height:0;padding:8px 10px;gap:6px}
.av-preview-selector{display:block;font-size:11px;color:var(--j-muted)}
.av-preview-selector select{display:block;width:100%;margin-top:4px}
.av-preview-screen{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px;border:1px solid var(--j-line);background:var(--j-secondary);font-size:11px}
.av-preview-field{display:block;margin-bottom:8px}
.av-preview-field>span{display:block;margin-bottom:3px;font-weight:600}
.av-preview-field b{color:var(--adm-danger,#dd4b39)}
.av-preview-grid,.av-preview-embedded{display:block;border:1px solid var(--j-line);padding:6px;margin:6px 0}
.av-preview-embedded>strong{display:block;margin-bottom:6px}
.av-preview-grid table{width:100%;border-collapse:collapse;margin-top:6px;font-size:10px}
.av-preview-grid th,.av-preview-grid td{border:1px solid var(--j-line);padding:5px;text-align:left;overflow-wrap:anywhere}
.av-preview-grid th{background:var(--j-surface)}
.av-preview-grid td,.av-preview-note{color:var(--j-muted)}
.av-preview-check{display:flex;align-items:center;gap:5px;margin:6px 0}
.av-preview-note{font-size:10px}
.av-preview-actions{display:flex;flex-direction:column;gap:3px;flex-shrink:0;border-top:1px solid var(--j-line);padding-top:5px;max-height:100px;overflow:auto}
.av-preview-actions .av-preview-action{width:100%;flex-shrink:0}
.av-preview-actions:empty{display:none}
.av-node .av-node-foot{flex-shrink:0}
.av-preview-selector,.av-preview-note{flex-shrink:0}
.av-lines.has-previews{z-index:3}
.av-preview-destination{padding:5px 7px;border-left:3px solid var(--j-accent);font-size:11px;flex-shrink:0}
.av-node.av-route-target{outline:3px solid var(--j-accent);outline-offset:4px;box-shadow:0 0 14px color-mix(in srgb,var(--j-accent) 45%,transparent)}
.av-route-view{background:color-mix(in srgb,var(--j-accent) 28%,var(--j-surface))!important;box-shadow:inset 3px 0 var(--j-accent)}
.av-route-view .av-view-heading{background:transparent}
.av-lines.has-route .av-edge:not(.av-route-edge){opacity:.22}
.av-edge.av-route-edge>path:not(.av-edge-hit){stroke-width:4;filter:drop-shadow(0 0 3px var(--j-accent))}
.av-edge.av-route-edge text{opacity:1;font-weight:700}
.av-preview-screen [data-preview-follow]{cursor:pointer}
.av-route-source{outline:2px solid var(--j-accent)!important;outline-offset:1px}
@layer sysimple-actions{#application-design [data-preview-follow]:hover,#application-design [data-preview-follow]:focus-visible{border-color:var(--j-accent)!important;outline:2px solid var(--j-accent);outline-offset:1px}}
.av-preview-placeholder{padding:6px;border:1px dashed var(--j-line)}
@layer sysimple-actions{
 #application-design .av-preview-body :is(input:not([type=checkbox]),select,textarea){box-sizing:border-box;width:100%;min-width:0;min-height:27px!important;height:auto!important;padding:4px 6px!important;font:inherit!important;background:var(--j-surface)!important;color:var(--j-text)!important;border:1px solid var(--j-line)!important;border-radius:0!important;opacity:1!important;resize:none}
 #application-design .av-preview-body input[type=checkbox]{width:13px;height:13px;min-height:0;opacity:1}
 #application-design .av-preview-action{height:auto!important;min-height:27px!important;padding:4px 7px!important;font-size:11px!important;margin:3px 4px 3px 0;background:var(--j-surface)!important;color:var(--j-text)!important;opacity:1!important;border:1px solid var(--j-line)!important}
}
.av-view{flex-shrink:0;border-top:1px solid var(--j-line)}
.av-view-heading{display:flex;height:36px;align-items:center;background:var(--j-secondary)}
.av-view.is-selected .av-view-heading{background:color-mix(in srgb,var(--j-accent) 18%,var(--j-surface));border-left:3px solid var(--j-accent)}
.av-view-fields{display:flex;flex-direction:column;overflow:hidden}
.av-view-field span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av-view-field small{margin-left:auto;font-size:9px;color:var(--j-muted)}
.av-node .av-node-foot{margin-top:auto}
.av-generated-controls{padding:10px;border:1px solid var(--j-line);font-size:12px;margin-top:10px}
.av-edge-hit{stroke:transparent!important;stroke-width:14px!important;pointer-events:stroke!important;fill:none!important}
.av-edge.navigation{color:var(--adm-success,#00a65a)}
.av-edge.embedded{color:var(--adm-warning,#f39c12)}
.av-edge.grid{color:var(--j-accent)}
.av-edge.navigation>path{stroke:var(--adm-success,#00a65a)}
.av-edge.embedded>path{stroke:var(--adm-warning,#f39c12)}
.av-arrow-child,.av-arrow-grid{fill:var(--j-accent)}
.av-arrow-relation{fill:var(--design-purple)}
.av-arrow-navigation{fill:var(--adm-success,#00a65a)}
.av-arrow-embedded{fill:var(--adm-warning,#f39c12)}
.av-legend-navigation{color:var(--adm-success,#00a65a)}
.av-legend-embedded{color:var(--adm-warning,#f39c12)}
#application-design{--av-internal-link:var(--design-purple,#9b72cf)}
.av-edge.av-internal>path:not(.av-edge-hit){stroke:var(--av-internal-link)}
.av-edge.av-internal text{fill:var(--av-internal-link)}
.av-arrow-internal{fill:var(--av-internal-link)}
.av-legend .av-legend-internal{display:inline;color:var(--av-internal-link)}
.av-edge text{opacity:0}
.av-edge:hover text,.av-edge:focus text,.av-edge.av-edge-active text{opacity:1}
.av-edge.av-edge-active>path:not(.av-edge-hit){stroke-width:3px}
@layer sysimple-actions{
 #application-design .av-view button,#application-design .av-view-summary button{background:transparent!important;color:var(--j-text)!important;border:0!important;box-shadow:none!important;min-height:0!important;min-width:0!important;padding:2px 8px!important;line-height:20px!important;justify-content:flex-start!important;font-size:11px!important;text-align:left!important}
 #application-design .av-view-heading>button:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #application-design .av-view-field{display:flex!important;gap:6px;width:100%!important;height:24px!important}
 #application-design .design-editor [hidden]{display:none!important}
}
.av-node{resize:both;overflow:auto;min-width:300px;min-height:128px;max-width:1000px;max-height:1200px}
.av-node-foot{padding-right:18px!important}
.av-node .av-invalid{border-left:3px solid var(--adm-danger,#dd4b39)!important;background:color-mix(in srgb,var(--adm-danger,#dd4b39) 12%,var(--j-surface))!important}
.av-node .av-invalid small{color:var(--adm-danger,#dd4b39);white-space:normal}

#application-design .av-node .av-node-top .av-card-expand{left:auto!important;right:4px;top:3px;opacity:1;cursor:pointer}
#application-design .av-node .av-node-top>span{margin-right:30px}

.av-preview-all{overflow:auto;min-height:0;flex:1;overscroll-behavior:contain}
/* A view is a section of the form, not another stack of framed cards. */
.av-preview-view{margin:0 0 18px;padding:0 0 10px;background:var(--j-secondary);border:0}
.av-preview-view h4{display:flex;align-items:center;gap:4px;margin:0;padding:10px 8px;border:0;border-left:3px solid var(--j-accent);background:color-mix(in srgb,var(--j-accent) 12%,var(--j-surface));font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.av-preview-view .av-preview-screen{min-height:70px;overflow:visible;flex:none;border:0;background:transparent;padding:12px 8px 4px}
.av-preview-view .av-preview-actions{max-height:none;overflow:visible;flex:none;border:0;padding:4px 8px 0}
.av-preview-body .av-preview-grid{border:0;padding:0;margin:10px 0}
.av-preview-body .av-preview-embedded{border:0;border-left:2px solid var(--j-line);padding:0 0 0 8px;margin:10px 0}
.av-preview-view:last-child{margin-bottom:0}

.av-node-title,.av-node-top{cursor:grab;touch-action:none}.av-node-title:active,.av-node-top:active{cursor:grabbing}

/* Consistent type markers in the diagram, previews and inspector. */
#application-design .av-type-icon{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 16px;margin-inline-end:5px;color:var(--j-accent)}
#application-design .av-type-icon svg{display:block;width:16px;height:16px}
#application-design .av-type-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

#application-design .design-state-badge{display:inline-block;vertical-align:middle;font-size:10px;line-height:1.5;padding:1px 5px;margin:2px 4px;border:1px solid currentColor;color:var(--j-text);white-space:normal;font-weight:600}
#application-design .design-state-badge[data-state=linked]{color:var(--adm-success,#16864c)}
#application-design .design-state-badge[data-state=planned],#application-design .design-state-badge[data-state=new]{color:var(--j-accent)}
#application-design .design-state-badge[data-state=modified],#application-design .design-state-badge[data-state=linked-unverified]{color:var(--adm-warning,#b77508)}
#application-design .design-state-badge[data-state=removed]{color:var(--adm-danger,#ce4035)}
#application-design .design-tracking-panel{margin-top:12px;border:1px solid var(--j-line);padding:10px;max-height:450px;overflow:auto}
#application-design .design-tracking-row{padding:8px 0;border-bottom:1px solid var(--j-line);overflow-wrap:anywhere}
#application-design .design-tracking-row small,#application-design .design-tracking-row a{display:block;margin-top:4px}

#application-design .av-reference-node{border-style:dashed;border-top:3px solid var(--adm-success,var(--j-accent))}
#application-design .av-reference-node>p,#application-design .av-reference-node .av-view{margin:10px;font-size:12px}

#application-design .av-reference-node .av-view>small,#application-design .av-reference-node .av-view>a{display:block;margin-top:5px}

.av-active .av-heading{flex-wrap:wrap}
.av-active .av-heading>div:first-child{flex:1 1 220px}
.av-active .av-heading [data-dirty]{margin:5px 0 0;font-size:12px}
.av-active .av-heading .av-header-actions{margin:0;padding:0;justify-content:flex-end;flex:0 1 auto}
.av-header-actions [data-action="delete-project"]{order:10}
#application-design.av-active .av-workspace>.design-tracking-panel{padding:0;max-height:none;overflow:visible;margin:0;border:0;border-bottom:1px solid var(--j-line);border-radius:0;background:var(--j-surface)}
.av-active .design-tracking-panel>summary{padding:12px 14px;box-sizing:border-box;min-height:42px;cursor:pointer;font-size:13px;font-weight:600;color:var(--j-text)}
.design-tracking-counts{display:inline-flex;flex-wrap:wrap;gap:6px 16px;margin-left:20px;font-size:12px;font-weight:400}
.av-active .design-tracking-content{max-height:280px;overflow:auto;padding:0 14px 12px}
.av-workspace>[data-history]:not(:empty){max-height:300px;overflow:auto;padding:12px;border-bottom:1px solid var(--j-line)}
.av-active .design-tracking-panel>summary:focus-visible{outline:2px solid var(--j-accent,#3c8dbc);outline-offset:-3px}
@media(max-width:700px){.av-active .av-heading .av-header-actions{justify-content:flex-start}.design-tracking-counts{display:flex;margin:8px 0 0}}

#application-design{--j-module:#9264c8}
.av-module-node{border-top:3px solid var(--j-module);background:var(--j-surface)}
.av-module-node .av-node-top{background:color-mix(in srgb,var(--j-module) 16%,var(--j-surface));border-bottom:1px solid var(--j-module)}
.av-module-body{padding:0 12px 12px;overflow:auto;max-height:150px;font-size:12px;line-height:1.45}
.av-module-body ul{padding-left:18px;margin:8px 0}.av-module-body small{display:block}
.av-edge.module path:not(.av-edge-hit){stroke:var(--j-module);stroke-width:2;stroke-dasharray:7 3}
.av-arrow-module{fill:var(--j-module)}
.av-module-actions{padding:8px 12px;flex-shrink:0}
#application-design .av-module-actions button{width:100%;min-height:34px;white-space:normal}
.design-module-connections{list-style:none;padding:0;margin:0 0 16px}
.design-module-connections li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--j-line)}
.design-module-connections li>div{flex:1;min-width:0;overflow-wrap:anywhere}
.design-module-connections small{display:block;margin-top:4px;color:var(--j-muted)}
.design-module-connections button{flex-shrink:0;min-height:34px}
.design-modules [data-module-content]>h3{margin-top:18px}
.design-modules label{display:flex;flex-direction:column;gap:5px;margin:10px 0}
.design-modules label.journey-check{flex-direction:row;align-items:center}
.design-modules select,.design-modules input:not([type=checkbox]){width:100%;min-width:0;box-sizing:border-box}
@media(max-width:500px){.design-module-connections li{flex-wrap:wrap}.design-module-connections button{width:100%}}
.av-edge.module:focus-visible{outline:2px solid var(--j-module)}
.av-legend-module::before{content:"";display:inline-block;width:12px;height:12px;background:var(--j-module);margin-right:6px;vertical-align:middle}

#application-design{--j-workflow:#16878a}
.av-workflow-node{border-top:3px solid var(--j-workflow)}
.av-workflow-node .av-node-top{background:color-mix(in srgb,var(--j-workflow) 16%,var(--j-surface));border-bottom:1px solid var(--j-workflow)}
.av-edge.workflow path:not(.av-edge-hit){stroke:var(--j-workflow);stroke-width:2;stroke-dasharray:3 3}
.av-arrow-workflow{fill:var(--j-workflow)}
.av-legend-workflow::before{content:"";display:inline-block;width:12px;height:12px;background:var(--j-workflow);margin-right:6px;vertical-align:middle}
.design-draft-map{display:grid;grid-template-columns:minmax(120px,1fr) minmax(140px,1fr) minmax(120px,1fr);gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--j-line)}
.design-draft-map[hidden]{display:none}
@media(max-width:700px){.design-draft-map{grid-template-columns:minmax(0,1fr)}}

/* Compact context and project commands; preserve readable labels and hit targets. */

#application-design.av-active>[data-journey-message]:not(:empty){padding:5px 10px;margin-bottom:6px;overflow-wrap:anywhere}
#application-design.av-active .av-heading{padding:6px 10px;gap:6px 12px}
#application-design.av-active .av-project-context{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;min-width:0;flex:1 1 240px}
#application-design.av-active .av-project-context h2{flex-basis:100%;font-size:14px;line-height:1.35}
#application-design.av-active .av-heading [data-dirty]{margin:0;padding:1px 6px;font-size:11px;line-height:18px}
#application-design.av-active .av-status{padding:1px 6px;line-height:18px}
#application-design.av-active .av-header-actions{border:0;gap:6px}
.av-project-more{position:relative;flex-shrink:0;font-size:12px}
.av-project-more>summary{display:list-item;cursor:pointer;min-height:34px;padding:6px 10px;border:1px solid var(--j-line);background:var(--j-secondary);white-space:nowrap}
.av-project-more[open]>summary{border-color:var(--j-accent)}
.av-project-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:40;display:flex;flex-direction:column;gap:4px;width:max-content;max-width:min(300px,calc(100vw - 48px));padding:6px;border:1px solid var(--j-line);background:var(--j-surface);box-shadow:0 4px 12px #0003}
#application-design.av-active .av-toolbar{padding:5px 10px;gap:4px}
#application-design.av-active .design-tracking-panel>summary{padding:6px 10px;min-height:34px}
#application-design.av-active .av-tabs{padding:3px 10px 0}
@layer sysimple-actions{
 #application-design .av-header-actions .av-project-command{min-height:34px!important;padding:5px 8px!important}
 #application-design .av-project-menu .av-project-command{justify-content:flex-start;width:100%!important;white-space:normal;text-align:left}
}
@media(max-width:1200px){
 #application-design.av-active:not(.av-wide) .design-layout{grid-template-columns:minmax(0,1fr) 280px}
 #application-design.av-active:not(.av-wide) .design-projects{grid-column:1/-1;grid-row:1}
 #application-design.av-active:not(.av-wide) .av-workspace{grid-column:1;grid-row:2}
 #application-design.av-active:not(.av-wide) .design-editor{grid-column:2;grid-row:2}
 #application-design.av-active>.journey-head{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
 #application-design.av-active>.journey-head .design-steps{grid-row:2;grid-column:1/-1;justify-self:start}
 #application-design.av-active>.journey-head .design-back{grid-row:1;grid-column:2}
}
@media(max-width:700px){
 #application-design.av-active:not(.av-wide) .design-layout{grid-template-columns:minmax(0,1fr)}
 #application-design.av-active:not(.av-wide) .design-editor{grid-column:1;grid-row:3}
 #application-design.av-active>.journey-head{grid-template-columns:minmax(0,1fr);gap:6px}
 #application-design.av-active>.journey-head .design-back{grid-row:3;grid-column:1;justify-self:start}
 #application-design.av-active>.journey-head .design-steps{width:100%}
 #application-design.av-active>.journey-head .design-steps li{padding:3px 4px;gap:4px}
 #application-design.av-active .av-header-actions{justify-content:flex-start}
 .av-project-menu{right:0}
}
/* Portable view layout: native columns stack at the same small-screen breakpoint. */
.av-layout-section{border:1px solid var(--j-line);background:var(--j-secondary);padding:10px;margin:8px 0;min-width:0}
.av-layout-section>h4,.av-layout-section>summary{margin:0 0 10px;font-size:13px;font-weight:600}
.av-layout-section>summary{cursor:pointer;min-height:28px}
.av-layout-columns{display:grid;grid-template-columns:repeat(var(--layout-columns,1),minmax(0,1fr));gap:14px}
.av-layout-column{min-width:0}
.av-layout-column .av-preview-field{min-width:0;overflow-wrap:anywhere}
.design-layout-editor .av-layout-settings{display:grid;grid-template-columns:minmax(160px,2fr) 90px minmax(130px,1fr);gap:10px;border:1px solid var(--j-line);padding:12px;margin:10px 0}
.design-layout-editor .av-layout-settings>.journey-check,.design-layout-editor .av-layout-settings>button{grid-column:1/-1}
.design-layout-editor .av-layout-assignment{display:grid;grid-template-columns:minmax(150px,2fr) minmax(130px,2fr) minmax(90px,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--j-line);align-items:center}
.design-layout-editor label{display:flex;flex-direction:column;gap:4px;min-width:0}
.design-layout-editor label.journey-check{flex-direction:row}
.design-layout-editor input,.design-layout-editor select{width:100%;min-height:34px;box-sizing:border-box}
.design-layout-editor input[type=checkbox]{width:auto;min-height:0}
.design-layout-editor [data-layout-error]{color:var(--j-danger,#dd4b39)}
@media(max-width:767px){.av-layout-columns{grid-template-columns:minmax(0,1fr)}.design-layout-editor .av-layout-settings,.design-layout-editor .av-layout-assignment{grid-template-columns:minmax(0,1fr)}}
.av-layout-untitled{border:0;padding:0;background:transparent}
.design-navigation-editor .av-navigation-row{display:flex;align-items:end;gap:12px;border:1px solid var(--j-line);padding:12px;margin:10px 0}
.design-navigation-editor .av-navigation-row label{flex:1;min-width:0}
.design-navigation-editor label:not(.journey-check){display:grid;gap:5px;margin-block:8px}
.design-navigation-editor label:not(.journey-check)>:is(input,select){width:100%;min-width:0;box-sizing:border-box}
.design-navigation-editor [data-nav-forms]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.av-navigation-group{border:1px solid var(--j-line);padding:12px;margin:12px 0}
.av-navigation-group>h4{margin:0 0 10px}
.av-navigation-group section{padding-inline:12px}
.design-navigation-editor input[type=checkbox]{flex-shrink:0}
.design-navigation-editor [role=alert]{color:var(--j-danger,#dd4b39)}
@media(max-width:767px){.design-navigation-editor .av-navigation-row{flex-direction:column;align-items:stretch}.design-navigation-editor [data-nav-forms]{grid-template-columns:minmax(0,1fr)}}

@layer sysimple-actions{#application-design .av-preview-navigation{background:#2f739b!important;color:#fff!important;border-color:#3c8dbc!important}}
#application-design .av-node-title>i,#application-design .av-view-heading>i{margin-right:6px;flex-shrink:0}