/* Admin > Workflow Studio (Sprint 27, laid out again in Sprint 28): ONE box that holds, top to bottom, a toolbar, the chart (with the details panel docked beside it) and the AI bar. Nothing floats over the
   chart, so nothing hides it. Tokens only. Node sizes and the pan / zoom are set from script (element.style), never in markup (CSP). */
/* The drawn pipeline map (Sprint 30): boxes for pipelines, arrows for "this stage attaches that pipeline". Colours are tokens so it follows the theme. */
.smap-wrap { overflow: auto; max-height: 70vh; }
.smap { display: block; font: 13px system-ui, sans-serif; }
.smap-box > rect { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.smap-title { fill: var(--text); font-weight: 600; }
.smap-kind { fill: var(--text-2); font-size: 11px; }
.smap-row > rect { fill: var(--canvas); stroke: var(--line); }
.smap-row text { fill: var(--text); }
.smap-row.waits > rect { fill: var(--accent-soft); stroke: var(--accent); }
.smap-edge { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.smap-arrow { fill: var(--accent); }
.smap-full { max-height: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.smap-drill { cursor: pointer; }
.smap-drill:hover > rect, .smap-drill:focus > rect { stroke: var(--accent); stroke-width: 2.5; }
.smap-drill:focus { outline: none; }
.smap-box.closed > rect { stroke-dasharray: 4 3; }
.smap-shelf { fill: var(--text-2); font-weight: 600; font-size: 12px; }
.swim-band { fill: var(--canvas); stroke: var(--line); stroke-width: 1; }
.swim-lane { cursor: pointer; }
.swim-lane:hover .swim-band, .swim-lane:focus .swim-band { stroke: var(--accent); stroke-width: 2; }
.swim-lane:focus { outline: none; }
.swim-lane.closed .swim-band { stroke-dasharray: 4 3; }
.swim-lane .smap-row > rect { fill: var(--surface); }
.swim-lane .smap-row.waits > rect { fill: var(--accent-soft); stroke: var(--accent); }
.zline-close { border-left-color: var(--text-2); border-left-style: dotted; }
.zline-sync { border-left-color: var(--accent); border-left-style: dashed; border-left-width: 2px; }
.zside-sync { position: absolute; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); white-space: nowrap; }
.zside-close { position: absolute; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); white-space: nowrap; }
.zline { position: absolute; width: 0; border-left: 2.5px dashed var(--accent); pointer-events: none; transform: translateX(-1px); }
.zline.drag { border-left-style: solid; }
.zside { position: absolute; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); white-space: nowrap; pointer-events: none; }
.zside-l { transform: translateX(-100%); }
.zline-handle { position: absolute; width: 26px; height: 40px; transform: translate(-50%, 0); border: 2px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--accent); display: grid; place-items: center; cursor: ew-resize; padding: 0; touch-action: none; }
.zline-handle:disabled { cursor: default; opacity: .55; border-style: dashed; }
.zline-handle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.swim-line { pointer-events: none; }
.swim-line line { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 8 5; }
.swim-sync line { stroke-width: 1.8; stroke-dasharray: 5 4; }
.swim-sync.close line { stroke: var(--danger, #c0392b); }
.swim-sync.close .swim-side { fill: var(--danger, #c0392b); }
.swim-sync .swim-side { text-transform: none; letter-spacing: 0; font-size: 11px; }
.swim-side { fill: var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.swim-lane .smap-row.deal > rect { fill: var(--accent-soft); }
.swim-lane .smap-row.makes > rect { stroke: var(--accent); stroke-width: 2; }
.smap-edge.also { stroke-dasharray: 4 3; opacity: .8; }
.smap-copies { fill: var(--text-2); font-size: 11px; }
.smap-when { fill: var(--accent); font-size: 11px; font-weight: 600; }
.studio-allhead { margin-bottom: var(--s-3); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; }
.studio-pipes { margin-bottom: var(--s-3); }
.studio { position: relative; display: flex; flex-direction: column; height: calc(100vh - 262px); min-height: 480px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.studio-bar { flex: none; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); background: var(--surface); }
.studio-group { display: flex; align-items: center; gap: var(--s-1); }
.studio-sp { flex: 1; }
.studio-state { font-size: var(--fs-xs); font-weight: 700; padding: 1px 8px; border-radius: var(--r-pill); background: var(--good-soft); color: var(--good); }
.studio-state.dirty { background: var(--warn-soft); color: var(--warn); }
.studio-flownote { font-size: var(--fs-xs); font-weight: 700; color: var(--warn); }
.studio-bar #sFlow { max-width: 170px; }          /* (Sprint 44) the toolbar stays on one line in a 1100px page: Publish was wrapping onto a second row */
.studio-lock { flex: none; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--accent-soft); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.studio-lock[hidden] { display: none; }
.studio-lock > span { flex: 1; }
.studio-main { flex: 1; min-height: 0; display: flex; }
.studio-canvas { position: relative; flex: 1; min-width: 0; background: var(--surface-2); }

.studio-vp { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; outline: none; background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 22px 22px; }
.studio-vp:focus-visible { box-shadow: inset var(--ring); }
.studio-vp.panning { cursor: grabbing; }
.studio-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.studio-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; color: var(--text-3); }
.studio-edges .e { fill: none; stroke: currentColor; stroke-width: 1.5; }
.studio-edges .e.dash { stroke-dasharray: 3 3; opacity: .7; }
.zlabel { position: absolute; white-space: nowrap; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }

.znode { position: absolute; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--r-md); background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; box-shadow: var(--sh-md); user-select: none; overflow: hidden; }
.znode .zt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.znode .zt small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.znode svg { flex: none; }
.znode:hover { border-color: var(--accent); }
.znode.sel { outline: 3px solid var(--accent); outline-offset: 2px; }
.znode-stage { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; border-radius: 25px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 0 14px; }
.znode-stage .zt { flex: none; width: 100%; line-height: 1.25; }
.znode-stage .zcount { position: absolute; right: 12px; top: 6px; }
.znode-stage .zt small { color: var(--text-2); }
.znode-trigger { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); font-weight: 600; }
.znode-approval { border-color: var(--warn); }
.znode-link { background: var(--surface); border: 2px solid var(--accent); color: var(--text); font-weight: 600; cursor: pointer; }
.znode-link small { display: block; font-weight: 400; opacity: .75; font-size: 11px; }
.studio-edges .e.link { stroke: var(--accent); stroke-dasharray: 5 3; opacity: .9; }
.znode-aistep { background: var(--ai-soft, #f0e9fc); border: 1.5px dashed var(--ai, #6d3fd1); color: var(--ai, #6d3fd1); font-weight: 600; }
.znode-start { background: var(--accent-soft); border-color: var(--accent); border-style: dashed; color: var(--accent); font-weight: 600; }
.znode.new { border-color: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.znode.chg { border-style: dashed; border-color: var(--accent); }
.znode.gone { opacity: .55; border-color: var(--danger); }
.znode.gone .zt { text-decoration: line-through; }
.ztag { position: absolute; top: 0; right: 0; font-size: 9px; font-weight: 800; letter-spacing: .03em; padding: 1px 6px; border-radius: 0 var(--r-md) 0 var(--r-sm); color: var(--on-accent); background: var(--good); }
.ztag.chg { background: var(--accent); } .ztag.del { background: var(--danger); }
.zcount { flex: none; font-size: var(--fs-xs); font-weight: 600; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); border: 1px solid var(--line); }
.zadd { position: absolute; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; padding: 0; border: 1.5px dashed var(--line-strong); background: var(--surface); color: var(--text-2); cursor: pointer; }
.zadd:hover { border-color: var(--accent); color: var(--accent); }

.studio-empty { position: absolute; z-index: 4; left: 50%; top: 45%; transform: translate(-50%, -50%); width: min(560px, calc(100% - 40px)); text-align: center; pointer-events: none; }
.studio-empty[hidden] { display: none; }
.studio-empty > * { pointer-events: auto; }
.studio-empty .preset-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.studio-insp { flex: none; width: 310px; overflow: auto; background: var(--surface); border-left: 1px solid var(--line); padding: var(--s-3) var(--s-4); }
.studio-insp[hidden] { display: none; }
.studio-insp h3 { margin: 0 0 2px; font-size: var(--fs-lg); }
.studio-insp .sub { margin: 0 0 var(--s-3); color: var(--text-2); font-size: var(--fs-sm); }
.studio-insp .field { margin-bottom: var(--s-3); }
.studio-insp .field > label, .studio-insp .plabel { display: block; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 2px; }
.studio-insp .row { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.studio-insp .pchecks { display: flex; flex-direction: column; gap: 2px; }
.studio-insp .plist { margin: 0; padding-left: 18px; }

.studio-dock { flex: none; border-top: 1.5px solid var(--accent); background: var(--surface); padding: var(--s-2) var(--s-3); }
.studio-reply { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--accent-soft); margin-bottom: var(--s-2); font-size: var(--fs-sm); max-height: 110px; overflow: auto; }
.studio-reply .acts { margin-top: var(--s-2); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.studio-reply .warn { color: var(--warn); margin: var(--s-1) 0 0; padding-left: 18px; }
.studio-prompt { display: flex; gap: var(--s-2); align-items: center; }
.studio-prompt svg { color: var(--accent); flex: none; }
.studio-prompt input { flex: 1; }
.studio-chips { display: flex; gap: var(--s-1) var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); }
.studio-chips button { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: var(--r-pill); padding: 1px 10px; font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.studio-menu { position: absolute; z-index: 9; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: var(--s-1); min-width: 220px; }
.studio-menu button { display: flex; gap: var(--s-2); align-items: center; width: 100%; text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: var(--r-sm); font: inherit; color: var(--text); cursor: pointer; }
.studio-menu button:hover, .studio-menu button:focus-visible { background: var(--accent-soft); }
.studio-menu small { display: block; padding: 3px 10px; color: var(--text-2); font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .05em; }
@media (max-width: 800px) { .studio-main { flex-direction: column; } .studio-insp { width: auto; max-height: 45%; border-left: 0; border-top: 1px solid var(--line); } }
@media (prefers-reduced-motion: no-preference) { .znode { transition: border-color .12s, box-shadow .12s; } }

/* The program builder (Sprint 31): a template palette beside the stages of a pipeline; the pipelines a stage attaches sit inside it as nested lanes. */
.sb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin-bottom: var(--s-2); }
.sb-body { display: flex; gap: var(--s-3); align-items: flex-start; }
.sb-palette { flex: none; width: 190px; }
.sb-palette ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.sb-tpl { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 6px 10px; cursor: grab; }
.sb-grid { flex: 1; display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); }
.sb-stage { flex: none; width: 220px; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-2); background: var(--surface); }
.sb-stage h3 { margin: 0 0 var(--s-2); font-size: var(--fs-sm); }
.sb-over { border-color: var(--accent); background: var(--accent-soft); }
.sb-drop { border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 8px; text-align: center; color: var(--text-2); font-size: var(--fs-xs); margin: var(--s-1) 0; }
.sb-lane { border: 1px solid var(--accent); border-radius: var(--r-sm); padding: 6px 8px; margin-bottom: var(--s-1); background: var(--accent-soft); cursor: pointer; }
.sb-lane-hd { display: flex; align-items: center; gap: var(--s-1); flex-wrap: wrap; }
.sb-flow { display: flex; flex-wrap: wrap; gap: 3px; list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--fs-xs); }
.sb-flow li { border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; background: var(--surface); }
@media (max-width: 800px) { .sb-body { flex-direction: column; } .sb-palette { width: auto; } }