/* Studio Maps, the canvas (S4), in the Cockpit's look since S7 (RID907): the same
   tokens as the Run views (MERLIN v3 cockpit.css, RID596), copied, not imported.
   The kinds keep their colours as the bar on each node and the palette. */
.ck {
  --ck-bg: #0b1020; --ck-bg-2: #111833; --ck-panel: #131b36; --ck-card: rgba(255, 255, 255, 0.045);
  --ck-line: rgba(255, 255, 255, 0.16); --ck-line-strong: rgba(255, 255, 255, 0.28); --ck-edge: rgba(122, 167, 255, 0.42);
  --ck-title: #dbe4ff; --ck-ink: #eef1fb; --ck-muted: #a7b0cc;
  --ck-blue: #7aa7ff; --ck-violet: #9b7bff; --ck-live: #39ff88; --ck-done: #3ccf91; --ck-warn: #ff9f43; --ck-bad: #ff6b6b; --ck-cyan: #4dd9ff; --ck-idle: #5c6788;
  --bg: var(--ck-bg); --panel: rgba(255,255,255,0.03); --ink: var(--ck-ink); --muted: var(--ck-muted); --line: var(--ck-line);
  --agent: rgba(155, 123, 255, 0.09); --agent-edge: rgba(155, 123, 255, 0.5); --ent: rgba(122, 167, 255, 0.08); --ent-edge: rgba(122, 167, 255, 0.5);
  --bad: var(--ck-bad); --ok: var(--ck-done); --accent: var(--ck-blue);
  --k-trigger: #8a94a6; --k-source: #7aa7ff; --k-prep: #7aa7ff; --k-baseline: #a7b0cc; --k-agent: #9b7bff; --k-supervisor: #9b7bff;
  --k-check: #3ccf91; --k-check-ai: #4dd9ff; --k-router: #8a94a6; --k-people: #ff9f43; --k-act: #ff6b6b; --k-wait: #8a94a6; --k-reconcile: #7aa7ff; --k-stop: #8a94a6;
  color: var(--ink); color-scheme: dark;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; display: grid; grid-template-rows: auto 1fr auto; height: 100vh;
  background: radial-gradient(60vmax 40vmax at 15% 0%, rgba(122, 167, 255, 0.12), transparent 70%), radial-gradient(50vmax 40vmax at 90% 10%, rgba(155, 123, 255, 0.10), transparent 70%), linear-gradient(180deg, var(--ck-bg) 0%, var(--ck-bg-2) 100%); }
header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: rgba(11, 16, 32, 0.6); backdrop-filter: blur(6px); }
.brand { font-weight: 600; white-space: nowrap; color: var(--ck-title); letter-spacing: .01em; } .brand span { color: var(--ck-blue); } .brand em { font-style: normal; color: var(--ck-muted); font-weight: 400; margin-left: 6px; }
.pages { display: flex; gap: 2px; margin-left: 6px; }
.pages { gap: 0; margin-left: 14px; border: 1px solid var(--ck-line-strong); border-radius: 8px; overflow: hidden; }
.pages a { padding: 5px 13px; border-right: 1px solid var(--ck-line); color: var(--ck-muted); text-decoration: none; font-weight: 500; } .pages a:last-child { border-right: 0; }
.pages a.on { color: #fff; background: linear-gradient(180deg, #3b6fd6, #2c58b3); } .pages a:hover:not(.on) { background: rgba(122,167,255,0.12); color: var(--ck-title); }
.pick { font-size: 13px; color: var(--muted); }
.spacer { flex: 1; }
button { font: inherit; padding: 5px 11px; border: 1px solid var(--ck-line-strong); background: rgba(255,255,255,0.06); color: var(--ink); border-radius: 7px; cursor: pointer; }
button:hover { border-color: var(--ck-blue); } button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: linear-gradient(180deg, #3b6fd6, #2c58b3); border-color: transparent; color: #fff; }
input, select, textarea { font: inherit; padding: 4px 7px; border: 1px solid var(--ck-line-strong); border-radius: 6px; background: rgba(0,0,0,0.25); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ck-blue); box-shadow: 0 0 0 2px rgba(122,167,255,0.25); }
select option { background: var(--ck-panel); color: var(--ink); }
.state { font-size: 13px; color: var(--muted); }
.state.bad { color: var(--bad); font-weight: 600; } .state.ok { color: var(--ok); font-weight: 600; }
main { display: grid; grid-template-columns: 150px 1fr 330px; min-height: 0; }
#palette { grid-column: 1; } #work { grid-column: 2; } #side { grid-column: 3; }
main.no-palette { grid-template-columns: 0 1fr 330px; } main.no-palette #palette { display: none; }
main.no-side { grid-template-columns: 150px 1fr 0; } main.no-side #side { display: none; }
main.no-palette.no-side { grid-template-columns: 0 1fr 0; }
#palette { padding: 10px; overflow: auto; border-right: 1px solid var(--line); background: var(--panel); }
#palette h4 { margin: 10px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
#palette .hint { margin-bottom: 8px; }
#palette .group { display: flex; align-items: center; gap: 4px; width: 100%; text-align: left; margin: 10px 0 4px; padding: 2px 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
#palette .group .chev { transition: transform .15s; } #palette .group[aria-expanded="true"] .chev { transform: rotate(90deg); }
#palette .tiles { display: grid; grid-template-columns: 1fr; gap: 4px; }
#palette .tile { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 6px 8px; border-left: 4px solid var(--kc, #888); font-size: 12.5px; }
#palette .tile .ico { color: var(--kc); flex: none; }
button.plain { background: transparent; border-color: transparent; padding: 2px 4px; }
.ico { width: 16px; height: 16px; fill: none; vertical-align: -3px; }
.withicon { display: inline-flex; align-items: center; gap: 6px; } .withicon svg { width: 15px; height: 15px; }
h3.withicon .ico { width: 18px; height: 18px; color: var(--ck-blue); }
.chev { width: 12px; height: 12px; }
#work { display: grid; grid-template-rows: auto auto 1fr auto auto; min-width: 0; min-height: 0; position: relative; }
#toolbar { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); flex-wrap: wrap; }
.linkopts { display: flex; gap: 10px; align-items: center; padding: 2px 8px; border: 1px dashed var(--ck-edge); border-radius: 8px; }
.next { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; color: var(--ck-title); background: rgba(122,167,255,0.10); border-bottom: 1px solid var(--line); }
.next svg { width: 16px; height: 16px; color: var(--ck-blue); flex: none; }
.next-inline { padding: 8px 10px; border-radius: 8px; background: rgba(122,167,255,0.12); border: 1px solid var(--ck-edge); font-size: 13px; }
ol.guide { padding-left: 18px; font-size: 12.5px; color: var(--muted); } ol.guide li { margin: 6px 0; } ol.guide b { color: var(--ink); }
.fbar { border-top: 1px solid var(--line); background: rgba(11, 16, 32, 0.6); padding: 4px 10px; font-size: 13px; }
.fbar button { display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; }
.fbar .chev { transition: transform .15s; } .fbar.open .chev { transform: rotate(90deg); }
.fbar.todo button { color: var(--ck-warn); } .fbar.ok button { color: var(--ck-done); }
.state.todo { color: var(--ck-warn); font-weight: 600; }
select.todo, input.todo { border-color: var(--ck-warn); box-shadow: 0 0 0 2px rgba(255,159,67,0.18); }

#toolbar label { font-size: 13px; color: var(--muted); }
.seg button { border-radius: 0; } .seg button:first-child { border-radius: 6px 0 0 6px; } .seg button:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.seg button.on { background: rgba(122,167,255,0.22); color: var(--ck-title); border-color: var(--ck-edge); }
.hint { font-size: 12px; color: var(--muted); }
#canvas-wrap { overflow: auto; min-height: 0; display: flex; align-items: flex-start; justify-content: flex-start; padding: 8px; position: relative; }
#canvas { display: block; user-select: none; }
#canvas .lane-agent { fill: var(--agent); stroke: var(--agent-edge); }
#canvas .lane-ent { fill: var(--ent); stroke: var(--ent-edge); }
#canvas .lane-title { font-size: 12px; font-weight: 600; fill: var(--muted); letter-spacing: .04em; }
#canvas .bridge { stroke: var(--ck-cyan); stroke-dasharray: 6 4; opacity: .7; }
#canvas .node rect { fill: #1a2242; stroke: var(--kc); stroke-width: 2; }
#canvas .node .bar { fill: var(--kc); stroke: none; }
#canvas .node text { font-size: 12px; fill: var(--ink); pointer-events: none; }
#canvas .node .sub { fill: var(--muted); font-size: 11px; }
#canvas .node.sel rect { stroke-width: 3.5; filter: drop-shadow(0 0 5px rgba(122,167,255,.75)); }
#canvas .node.bad rect { stroke-dasharray: none; } #canvas .node.bad:not(.sel) > rect:first-of-type { stroke: var(--ck-warn); opacity: .95; }
#canvas .lpill { fill: #0f162e; stroke: var(--ck-line); opacity: .92; }
#canvas .badge { fill: var(--ck-warn); stroke: #0b1020; stroke-width: 1.5; } #canvas .badge-t { font-size: 10px; font-weight: 800; fill: #0b1020; pointer-events: none; }
#canvas .kicon { color: var(--kc); opacity: .9; pointer-events: none; }
#canvas .node.from rect { fill: #2b2a1f; }
#canvas .node { cursor: grab; }
#canvas .link { fill: none; stroke-width: 1.8; }
#canvas .link.data { stroke: #93a0b8; } #canvas .link.event { stroke: var(--ck-done); } #canvas .link.approval { stroke: var(--ck-warn); stroke-width: 2.4; }
#canvas .link.return { stroke: var(--ck-bad); stroke-dasharray: 6 4; }
#canvas .link.sel { stroke-width: 4; } #canvas .link.bad { stroke: var(--bad); }
#canvas .hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
#canvas .ltext { font-size: 11px; fill: #c9d2ea; paint-order: stroke; stroke: #0f162e; stroke-width: 3px; }
#side { border-left: 1px solid var(--line); background: var(--panel); display: grid; grid-template-rows: auto 1fr; min-height: 0; }
.tabs { display: flex; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid var(--ck-line-strong); background: rgba(0,0,0,0.18); }
.tabs button { flex: 1; border: 1px solid var(--ck-line); border-bottom: 0; border-radius: 8px 8px 0 0; background: rgba(255,255,255,0.03); color: var(--muted); padding: 6px 8px; margin-bottom: -1px; }
.tabs button.on { background: var(--ck-panel); color: var(--ck-title); font-weight: 600; border-color: var(--ck-line-strong); border-bottom: 1px solid var(--ck-panel); box-shadow: inset 0 2px 0 var(--accent); }
.tab { display: none; padding: 12px; overflow: auto; } .tab.on { display: block; }
.tab h3 { margin: 0 0 8px; font-size: 15px; color: var(--ck-title); } .tab h4 { margin: 14px 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.field { display: grid; grid-template-columns: 105px 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.field > span { font-size: 13px; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; background: var(--ck-card); }
.card p { margin: 3px 0; }
.locked { font-size: 12px; color: var(--muted); }
.route { display: grid; grid-template-columns: 80px 1fr 28px; gap: 4px; margin-bottom: 4px; }
table.small { border-collapse: collapse; width: 100%; font-size: 12px; } table.small td, table.small th { border-bottom: 1px solid var(--line); padding: 3px 4px; text-align: left; vertical-align: top; }
footer { max-height: 170px; overflow: auto; border-top: 1px solid var(--line); background: rgba(11, 16, 32, 0.6); padding: 6px 14px; font-size: 13px; }
footer ul { margin: 4px 0; padding-left: 18px; } footer li { cursor: pointer; margin: 3px 0; } footer li:hover { text-decoration: underline; }
footer .rule { font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
dialog { border: 1px solid var(--ck-line-strong); border-radius: 10px; padding: 16px 18px; width: 520px; background: var(--ck-panel); color: var(--ink); }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.choicecard { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; gap: 2px 10px; text-align: left; padding: 10px 12px; border-radius: 10px; }
.choicecard svg { grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--ck-blue); align-self: center; }
.choicecard b { color: var(--ck-title); } .choicecard small { color: var(--muted); font-size: 12px; }
.choicecard.on { border-color: var(--ck-blue); background: rgba(122,167,255,0.14); box-shadow: 0 0 0 2px rgba(122,167,255,0.25); }
.choicecard.off { opacity: .55; }
dialog::backdrop { background: rgba(5, 8, 18, 0.6); }
dialog label { display: grid; grid-template-columns: 90px 1fr; gap: 8px; align-items: center; margin: 8px 0; }
dialog select, dialog input, dialog textarea { width: 100%; min-width: 0; max-width: 100%; }
dialog label:has(textarea) { align-items: start; }
dialog textarea { resize: vertical; min-height: 5em; }
#new-go.busy { opacity: .6; pointer-events: none; }
dialog .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
#toast { position: fixed; bottom: 60px; right: 18px; background: #1a2242; border: 1px solid var(--ck-edge); color: var(--ink); padding: 8px 12px; border-radius: 8px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 420px; }
#toast.on { opacity: .97; }
.danger { color: var(--bad); border-color: rgba(255,107,107,0.5); }
a { color: var(--ck-blue); }
/* RID909: handles, the rubber line, the link popover, the right-click menu */
#canvas .handle { fill: #0f162e; stroke: var(--ck-cyan); stroke-width: 2; cursor: crosshair; opacity: 0; transition: opacity .12s; }
#canvas .node:hover .handle, #canvas .node.sel .handle, #canvas .node.from .handle { opacity: 1; }
#canvas .handle:hover { fill: var(--ck-cyan); }
#canvas .rubber { fill: none; stroke: var(--ck-cyan); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }
#canvas .lpill.event { stroke: rgba(60,207,145,0.6); } #canvas .lpill.approval { stroke: rgba(255,159,67,0.7); } #canvas .lpill.return { stroke: rgba(255,107,107,0.7); }
#canvas .ltext.event { fill: #9fe9c6; } #canvas .ltext.approval { fill: #ffd2a6; } #canvas .ltext.return { fill: #ffb3b3; }
#canvas .bg { cursor: default; }
.pop { position: absolute; z-index: 5; width: 290px; background: var(--ck-panel); border: 1px solid var(--ck-edge); border-radius: 10px; padding: 10px 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.45); font-size: 13px; }
.pop label { display: grid; grid-template-columns: 70px 1fr; gap: 6px; align-items: center; margin: 7px 0; color: var(--muted); } .pop label > * { min-width: 0; }
.pop .row { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.menu { position: absolute; z-index: 6; min-width: 220px; background: var(--ck-panel); border: 1px solid var(--ck-line-strong); border-radius: 10px; padding: 4px; box-shadow: 0 12px 30px rgba(0,0,0,0.5); font-size: 13px; }
.menu .mhead { padding: 6px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.menu .mitem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 10px; border-radius: 6px; color: var(--ink); }
.menu .mitem:hover { background: rgba(122,167,255,0.16); } .menu .mitem.danger { color: var(--ck-bad); } .menu .mitem.on { color: var(--ck-title); font-weight: 600; }
.menu .mitem .ico { width: 15px; height: 15px; color: var(--ck-blue); } .menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
a.btn { display: inline-block; padding: 5px 11px; border: 1px solid var(--ck-line-strong); border-radius: 7px; color: var(--ink); text-decoration: none; background: rgba(255,255,255,0.06); }
a.btn.primary { background: linear-gradient(180deg, #3b6fd6, #2c58b3); border-color: transparent; color: #fff; }
.pop.inline { position: static; display: flex; align-items: center; gap: 10px; width: auto; box-shadow: none; padding: 2px 8px; border-style: dashed; }
.pop.inline label { display: flex; margin: 0; gap: 5px; } .pop.inline b { font-weight: 500; color: var(--muted); } .pop.inline .row { display: none; }
/* the Bridge as a thin layer (RID911) */
#canvas .bridge { fill: rgba(77,217,255,0.07); stroke: rgba(77,217,255,0.45); stroke-dasharray: none; opacity: 1; }
#canvas .bridge-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; fill: var(--ck-cyan); }
#canvas .bridge-block rect { fill: rgba(77,217,255,0.12); stroke: rgba(77,217,255,0.55); }
#canvas .bridge-block text { font-size: 11px; fill: #bfefff; pointer-events: none; }
#canvas .bridge-note { font-size: 10px; fill: var(--ck-muted); }
/* RID913: the node's name, the bindings of the selected node */
#canvas .node .name { font-size: 12px; fill: #e6ebff; font-weight: 500; }
#canvas .binding path { fill: none; stroke: var(--ck-cyan); stroke-width: 1.6; stroke-dasharray: 2 4; opacity: .9; }
#canvas .binding.out path { stroke: #c4b5ff; }
#canvas .binding rect { fill: #0f2230; stroke: rgba(77,217,255,0.6); } #canvas .binding.out rect { fill: #1d1838; stroke: rgba(196,181,255,0.6); }
#canvas .binding text { font-size: 10.5px; fill: #bfefff; } #canvas .binding.out text { fill: #ded6ff; }
#canvas .bridge-block text { font-size: 10.5px; }
/* the Node panel (RID913) */
.checklist { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px; }
.ck-item { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.ck-item.ok { color: var(--ck-done); border-color: rgba(60,207,145,0.5); } .ck-item.todo { color: var(--ck-warn); border-color: rgba(255,159,67,0.6); }
.nsec { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 10px; }
.nsec h4 { margin: 0 0 8px !important; color: var(--ck-title) !important; }
table.bind { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.bind td { padding: 4px 4px; vertical-align: middle; border-bottom: 1px solid var(--line); }
table.bind td.port { width: 34%; font-weight: 600; color: var(--ck-title); } table.bind td.port small { display: block; font-weight: 400; color: var(--muted); font-size: 10.5px; }
table.bind select { width: 100%; } table.bind td.st { width: 18px; text-align: center; } table.bind td.st.ok { color: var(--ck-done); } table.bind td.st.todo { color: var(--ck-warn); }
.todo-note { display: block; color: var(--ck-warn); font-size: 11.5px; margin-top: 3px; }
details.more { margin-top: 6px; font-size: 12.5px; } details.more summary { cursor: pointer; color: var(--ck-blue); }
ul.links { list-style: none; padding: 0; margin: 0; font-size: 12.5px; } ul.links li { padding: 3px 0; display: flex; gap: 6px; align-items: center; }
ul.links .x { margin-left: auto; color: var(--ck-bad); }
/* the map's state (RID915) */
.mstate { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.mstate.incomplete { color: var(--ck-warn); border-color: rgba(255,159,67,0.6); background: rgba(255,159,67,0.08); }
.mstate.ready { color: var(--ck-blue); border-color: var(--ck-edge); background: rgba(122,167,255,0.10); }
.mstate.published { color: var(--ck-done); border-color: rgba(60,207,145,0.6); background: rgba(60,207,145,0.10); }
button.small { padding: 3px 10px; font-size: 12.5px; }

header > * { white-space: nowrap; flex: none; } header .spacer { flex: 1; }
#map-select { max-width: 300px; text-overflow: ellipsis; }
.pick { display: flex; align-items: center; gap: 6px; }
/* RID916: one input per block: name and type, bound or not, the choice, and what it says */
.binding-row { border: 1px solid var(--line); border-left: 3px solid var(--ck-warn); border-radius: 8px; padding: 7px 9px; margin-bottom: 8px; background: rgba(0,0,0,0.15); }
.binding-row.ok { border-left-color: var(--ck-done); }
.binding-row .bhead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; } .binding-row .bhead b { color: var(--ck-title); } .binding-row .bhead small { color: var(--muted); }
.binding-row .bhead .st { margin-left: auto; font-size: 11.5px; } .binding-row .st.ok { color: var(--ck-done); } .binding-row .st.todo { color: var(--ck-warn); }
.binding-row select { width: 100%; } .binding-row .says { font-size: 12px; color: var(--muted); margin-top: 5px; } .binding-row .says.todo { color: var(--ck-warn); }
/* RID929: the brand leads to Studio home */
a.brand { text-decoration: none; } a.brand:hover span { text-decoration: underline; }
/* RID931: the empty canvas moves the map; a node drag never selects text */
#canvas-wrap { cursor: grab; touch-action: none; } #canvas-wrap.panning { cursor: grabbing; } #canvas [data-step] { cursor: move; }
/* RID931: the map keeps the size its zoom gives it (it used to shrink to the pane, so zooming in did nothing across); centred while it fits, scrolled and dragged when it does not */
#canvas { flex: none; margin: 0 auto; }