/* canvas.css: the canvas screen of 07 §3 (tokens only). */
.canvas-view { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--bg); }
.canvas-banners:empty { display: none; }
.canvas-banners .banner { border-radius: 0; }
.readonly-bar { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 var(--s-4); background: var(--surface-2); color: var(--ink); font: var(--t-small); border-bottom: 1px solid var(--line); }

/* 3.1 canvas bar */
.canvas-bar { height: 44px; flex: none; display: flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-3); background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; z-index: var(--z-canvas-overlay); }
.canvas-bar .grow { flex: 1; min-width: var(--s-2); }
.bar-sep { width: 1px; height: 20px; background: var(--line); margin: 0 var(--s-1); flex: none; }
.canvas-bar .status-pill { flex: none; }
.canvas-bar .status-pill[hidden] { display: none; }
.zoom-value { min-width: 64px; justify-content: center; font-variant-numeric: tabular-nums; }
.listen-box, .run-status { display: inline-flex; align-items: center; gap: var(--s-2); font: var(--t-small); white-space: nowrap; }
.listen-box[hidden] { display: none; }
.live-chip { display: inline-flex; align-items: center; gap: var(--s-2); height: 28px; padding: 0 2px 0 var(--s-2); border-radius: var(--r-1); background: var(--warn-soft); color: var(--ink); font: var(--t-small); white-space: nowrap; }
.live-chip > .glyph { color: var(--warn); }
.live-chip[hidden] { display: none; }
.on-label { font: var(--t-label); white-space: nowrap; }
.save-state { display: inline-flex; align-items: center; gap: var(--s-1); font: var(--t-small); color: var(--ink-2); white-space: nowrap; }
.save-state .glyph { color: var(--ok); }
.save-state.failed .glyph, .fail-text { color: var(--fail); }
.canvas-crumbs ol { flex-wrap: nowrap; }
.canvas-crumbs li:last-child { min-width: 0; }
.name-btn { display: inline-flex; align-items: center; gap: var(--s-1); border: none; background: transparent; font: var(--t-h1); color: var(--ink); padding: 0 var(--s-1); border-radius: var(--r-1); cursor: text; min-width: 0; max-width: 480px; }
.name-btn .current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.name-btn .glyph { color: var(--ink-3); }
.name-btn:hover { background: var(--surface-2); }
.name-input { font: var(--t-h2); width: 320px; }

/* the canvas area and test mode */
.canvas-area { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.canvas-area.test-mode::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px var(--warn); pointer-events: none; z-index: var(--z-canvas-overlay); }
.canvas-loading { display: flex; flex-direction: column; height: 100%; }
.canvas-skeleton { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); }
.skeleton-bar { padding: 0 var(--s-4); }

/* 3.2 grid: minor every 16, major every 80 units, 1 physical pixel at any zoom */
.canvas { position: absolute; inset: 0; overflow: hidden; outline: none; touch-action: none; user-select: none;
  --gs-minor: 16px; --gs-major: 80px;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: var(--gs-major) var(--gs-major), var(--gs-major) var(--gs-major), var(--gs-minor) var(--gs-minor), var(--gs-minor) var(--gs-minor); }
.canvas.no-minor { background-image: linear-gradient(to right, var(--grid-major) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px);
  background-size: var(--gs-major) var(--gs-major), var(--gs-major) var(--gs-major); }
.canvas.no-major { background-image: none; }
.canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.canvas.hand, .canvas.hand * { cursor: grab; }
.canvas.panning, .canvas.panning * { cursor: grabbing; }
.canvas-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.canvas[hidden] { display: none; }

/* 3.5 lines */
.line-halo { fill: none; stroke: var(--bg); stroke-width: 5; }
.line { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.line-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; pointer-events: stroke; }
.read-only .line-hit { cursor: default; }
.edge-g:hover .line { stroke: var(--ink-2); stroke-width: 2; }
.line.selected, .edge-g.selected .line { stroke: var(--accent); stroke-width: 2; }
.line.error { stroke: var(--fail); }
.line.empty { stroke: var(--idle); stroke-dasharray: 1.5 4; stroke-linecap: round; }
.line.dashed { stroke-dasharray: 6 4; }
.edge-g.drop-line .line { stroke: var(--accent); stroke-width: 3; }
.line.carry { stroke: var(--accent); stroke-dasharray: 12 400; animation: carry 300ms linear 1; }
@keyframes carry { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -400; } }
.arrow { fill: var(--line-strong); }
.arrow.sel { fill: var(--accent); }
.arrow.fail { fill: var(--fail); }
.arrow.idle { fill: var(--idle); }
.pill rect { fill: var(--surface); stroke: var(--line); stroke-width: 1; }
.pill text { font: var(--t-mono-small); fill: var(--ink); }
.pill.error rect { fill: var(--fail-soft); stroke: var(--fail); }
.pill.error text { fill: var(--fail); }
.pill.empty text { fill: var(--ink-2); }
.muted-run .pill, .muted-run .markers, .muted-run .line.empty { opacity: .7; }
.ghost-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 4; pointer-events: none; }
.guide { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

/* 3.3 rail cards */
.card-wrap { padding: 10px; width: 100%; height: 100%; }
.rail { position: relative; display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-1); color: var(--ink); overflow: visible; cursor: default; outline: none; }
.rail:hover { border-color: var(--line-strong); }
.rail.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.rail:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.card-wrap.lifted .rail { box-shadow: var(--e-2); }
.rail .stripe { width: 4px; flex: none; background: var(--kind-pure); border-radius: 3px 0 0 3px; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.rail.kind-trigger .stripe { width: 8px; background: var(--kind-trigger); }
.rail.kind-edge .stripe { background: var(--kind-edge); }
.rail.kind-link .stripe { background: var(--kind-link); }
.start-glyph.glyph { width: 8px; height: 8px; stroke: none; fill: currentColor; }
.start-glyph path { fill: currentColor; }
.card-body { flex: 1; min-width: 0; padding: 10px 12px 10px 12px; display: flex; flex-direction: column; }
.rail.out-labels .card-body { padding-right: 60px; }
.rail.in-labels .card-body { padding-left: 28px; }
.kind-line { display: flex; align-items: center; gap: var(--s-1); height: 14px; margin: 0 -4px 0 -4px; padding: 0 4px; border-radius: 2px; }
.rail.out-labels .kind-line { margin-right: -52px; }
.kind-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail.selected .kind-line { background: var(--accent-soft); }
.kind-glyph.glyph { width: 16px; height: 16px; color: var(--ink-2); flex: none; }
.result-chip { font: 500 10px/14px var(--font-sans); padding: 0 4px; border-radius: 2px; background: var(--surface-2); color: var(--ink-2); flex: none; }
.card-label { font: 600 14px/20px var(--font-sans); font-size: calc(14px * var(--label-scale, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-summary { font: var(--t-small); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-summary.mono { font: var(--t-mono-small); }
.card-summary.warn { color: var(--warn); }
.markers { position: absolute; top: -8px; right: 8px; display: flex; flex-direction: row-reverse; gap: 4px; }
.rail.out-labels .markers { right: 6px; }
.marker { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-round); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.marker .glyph { width: 12px; height: 12px; }
.marker.ok { color: var(--ok); } .marker.fail { color: var(--fail); } .marker.warn { color: var(--warn); } .marker.idle { color: var(--idle); } .marker.info { color: var(--info); }
.run-bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 2px 2px 0 0; overflow: hidden; display: none; }
.rail.running .run-bar { display: block; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: runbar 1.1s linear infinite; }
@keyframes runbar { from { background-position: -50% 0; } to { background-position: 150% 0; } }
.rail.failed { border: 1.5px solid var(--fail); }
.rail.disabled { border: 1px dashed var(--idle); }
.rail.disabled .stripe { background: var(--idle); }
.rail.disabled .card-label { text-decoration: line-through; color: var(--ink-3); }
.rail.disabled .card-summary { opacity: .6; }
.rail.switched-off { opacity: .75; }
.port-label { position: absolute; font: var(--t-mono-small); color: var(--ink-2); line-height: 16px; white-space: nowrap; pointer-events: none; }
.port-label.in { left: 12px; }
.port-label.out { right: 10px; }
.port-label.error { color: var(--fail); }
.link-open { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; padding: 0; border: none; border-radius: var(--r-1); background: transparent; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.link-open:hover { background: var(--surface-2); color: var(--ink); }
.card-note { font: var(--t-small); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.label-input { width: 100%; font: 600 14px/18px var(--font-sans); border: 1px solid var(--accent); border-radius: 2px; padding: 0 2px; background: var(--surface); color: var(--ink); }

/* ports */
.port-hit { fill: transparent; }
.port-shape { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.port.connected .port-shape { fill: var(--line-strong); }
.port.error .port-shape { stroke: var(--fail); }
.port.out, .port.in { cursor: crosshair; }
.read-only .port, .lod-1 .port { pointer-events: none; }
.port.valid-target .port-shape { stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; transform: scale(1.4); }
.port.invalid-target { opacity: .4; }
.port.kbd-target .port-shape { stroke: var(--accent); stroke-width: 3; fill: var(--accent-soft); }

/* 3.7 level of detail */
.lod-1 .card-summary, .lod-1 .port-label { visibility: hidden; }
.lod-2 .card-summary, .lod-2 .port-label, .lod-2 .kind-line, .lod-2 .card-note { visibility: hidden; }
.lod-3 .rail { background: var(--kind-pure); opacity: .3; border: none; }
.lod-3 .rail.kind-trigger { background: var(--kind-trigger); }
.lod-3 .rail.kind-edge { background: var(--kind-edge); }
.lod-3 .rail.kind-link { background: var(--kind-link); }
.lod-3 .card-body, .lod-3 .markers { visibility: hidden; }
.lod-3 .rail:hover .card-body { visibility: visible; }

/* notes */
.note { position: relative; width: 100%; height: 100%; border-radius: var(--r-1); padding: var(--s-2) var(--s-3); overflow: hidden; color: var(--ink); font: var(--t-body); outline: none; cursor: default; }
.note-1 { background: var(--note-1); } .note-2 { background: var(--note-2); } .note-3 { background: var(--note-3); }
.note-4 { background: var(--note-4); } .note-5 { background: var(--note-5); } .note-6 { background: var(--note-6); }
.note.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.note .md p, .note .md ul, .note .md h3, .note .md h4, .note .md h5 { margin: 0 0 4px; }
.note .md h3 { font: var(--t-h2); } .note .md h4, .note .md h5 { font: var(--t-h3); }
.note .md ul { padding-left: 18px; }
.note .md code { font: var(--t-mono-small); background: color-mix(in srgb, var(--ink) 8%, transparent); padding: 0 2px; border-radius: 2px; }
.note-edit { width: 100%; height: 100%; border: none; resize: none; background: transparent; color: var(--ink); outline: none; }
.note-resize { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.note-colour { position: absolute; right: 6px; top: 6px; width: 14px; height: 14px; border-radius: var(--r-round); border: 1.5px solid var(--ink-2); background: transparent; padding: 0; cursor: pointer; opacity: 0; }
.note:hover .note-colour, .note-colour:focus-visible { opacity: 1; }

/* overlays in screen coordinates */
.canvas-overlay { position: absolute; inset: 0; pointer-events: none; }
.canvas-overlay > * { pointer-events: auto; }
.hover-tools { position: absolute; transform: translateX(-100%); display: flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-1); box-shadow: var(--e-1); }
.hover-tools[hidden] { display: none; }
.port-plus-layer { position: absolute; inset: 0; pointer-events: none; }
.port-plus { position: absolute; pointer-events: auto; width: 18px; height: 18px; padding: 0; border-radius: var(--r-round); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.port-plus:hover, .port-plus:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.line-tools { position: absolute; transform: translate(-50%, -50%); display: flex; gap: 4px; }
.line-tools[hidden] { display: none; }
.line-btn { width: 22px; height: 22px; border-radius: var(--r-round); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.line-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.line-btn.del:hover { background: var(--fail); border-color: var(--fail); color: var(--danger-ink); }
.sel-bar { position: absolute; transform: translateX(-50%); display: flex; gap: 2px; padding: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--e-2); }
.sel-bar[hidden] { display: none; }
.sel-frame { position: absolute; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 30%, transparent); pointer-events: none; }
.sel-frame[hidden] { display: none; }
.canvas-tip { position: absolute; max-width: 280px; padding: 6px 8px; border-radius: var(--r-1); background: var(--tooltip-bg); color: var(--surface); font: var(--t-small); pointer-events: none; }
.canvas-tip[hidden] { display: none; }
.empty-trigger { position: absolute; transform: translate(-50%, -50%); }
.empty-trigger[hidden] { display: none; }
.empty-trigger-btn { width: 240px; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); border: 1.5px dashed var(--kind-trigger); border-radius: var(--r-1); background: var(--surface); color: var(--ink); cursor: pointer; padding: var(--s-3); }
.empty-trigger-btn:hover { background: var(--surface-2); }
.empty-trigger-btn > .glyph { color: var(--kind-trigger); }
.empty-trigger-title { font: 600 14px/20px var(--font-sans); }

/* 3.9 step browser */
.step-browser { width: 400px; }
.browser { display: flex; flex-direction: column; gap: var(--s-2); }
.browser-results { display: flex; flex-direction: column; gap: 2px; }
.browser-heading { padding: var(--s-3) var(--s-2) var(--s-1); }
.browser-cat { display: flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 var(--s-2); border: none; border-radius: var(--r-1); background: transparent; cursor: pointer; text-align: left; }
.browser-cat:hover, .browser-cat:focus-visible { background: var(--surface-2); }
.browser-entry { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: var(--s-1) var(--s-2); border-radius: var(--r-1); cursor: pointer; }
.browser-entry:hover, .browser-entry:focus { background: var(--surface-2); outline: none; }
.browser-entry:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.browser-entry.disabled { cursor: not-allowed; color: var(--ink-3); }
.browser-entry > .glyph { color: var(--ink-2); }
.browser-text { display: flex; flex-direction: column; min-width: 0; }
.browser-name { font: var(--t-label); }
.browser-desc { font: var(--t-small); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-none { padding: var(--s-3) var(--s-2); }

/* 3.16 run log */
.runlog { flex: none; display: flex; flex-direction: column; background: var(--surface); border-top: 1px solid var(--line); position: relative; z-index: var(--z-canvas-overlay); }
.runlog.open { min-height: 120px; max-height: 70vh; }
.runlog-grip { position: absolute; top: -4px; left: 0; right: 0; height: 8px; cursor: ns-resize; }
.runlog:not(.open) .runlog-grip { display: none; }
.runlog-head { height: 32px; flex: none; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3); overflow-x: auto; overflow-y: hidden; }
.runlog-toggle { display: inline-flex; align-items: center; gap: var(--s-1); border: none; background: transparent; font: var(--t-label); color: var(--ink); cursor: pointer; padding: 0 var(--s-1); height: 28px; border-radius: var(--r-1); white-space: nowrap; }
.runlog-toggle:hover { background: var(--surface-2); }
.runlog-id { font: var(--t-mono-small); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runlog-body { flex: 1; overflow: auto; min-height: 0; border-top: 1px solid var(--line); }
.runlog-empty { padding: var(--s-3) var(--s-4); }
.runlog-table { border-radius: 0; }
.runlog-status.ok { color: var(--ok); } .runlog-status.failed { color: var(--fail); } .runlog-status.empty { color: var(--idle); } .runlog-status.waiting { color: var(--warn); }
.runlog-status { display: inline-flex; }
.runlog-errrow td { height: auto; white-space: normal; background: var(--fail-soft); padding: var(--s-2) var(--s-4); }
.runlog-error { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--s-3); margin: 0 0 var(--s-2); font: var(--t-small); }
.runlog-error dt { color: var(--ink-2); }
.runlog-error dd { margin: 0; }
.runlog-json { margin: 0; white-space: pre-wrap; max-height: 200px; overflow: auto; background: var(--surface); padding: var(--s-2); border-radius: var(--r-1); }

/* 10.1 list view */
.list-outline { position: absolute; inset: 0; overflow: auto; padding: var(--s-4) var(--s-6); background: var(--bg); }
.list-outline[hidden] { display: none; }
.list-outline:focus { outline: none; }
.outline-head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-4); }
.outline-head .hint { flex: 1; }
.list-outline ul { list-style: none; margin: 0; padding-left: var(--s-5); }
.list-outline > .outline-list { padding-left: 0; }
.outline-row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; padding: var(--s-1) var(--s-2); margin: 2px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-1); }
.outline-label { font: var(--t-label); }
.outline-actions { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.outline-output { color: var(--ink-2); display: block; margin-top: var(--s-1); }
.chor-settings .fieldset { border: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.shortcut-table td { white-space: normal; }

@media (prefers-reduced-motion: reduce) {
  .rail.running .run-bar { animation: none; background: var(--accent); }
  .line.carry { animation: none; }
}
@media (forced-colors: active) {
  .rail { border: 1px solid CanvasText; }
  .rail.selected { outline: 2px solid Highlight; }
  .line { stroke: CanvasText; }
}
.browser-entry.best { background: var(--surface-2); }

/* Back to the view the choreography was opened from (Files folder, All with its filters, Runs, Flows). */
.canvas-crumbs { display: flex; align-items: center; gap: 10px; min-width: 0; }
.canvas-back { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 28px; padding: 0 10px 0 6px;
  border: 1px solid var(--line); border-radius: 6px; color: var(--ink); text-decoration: none; background: var(--surface); }
.canvas-back:hover { background: var(--surface-2, var(--surface)); border-color: var(--ink-3); text-decoration: none; color: var(--ink); }
.canvas-back:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }