/* 字段数据流画板（#/ontowork/flow）。只用 .oc- 开头的类，配色沿用 style.css 的变量。
   SVG 里字号一律 13px：最小缩放 0.85 时约 11px。 */
.oc-root{display:flex;flex-direction:column;gap:8px;min-width:0}
.oc-muted{color:var(--muted);font-size:12px}
.oc-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;word-break:break-all}
.oc-spacer{flex:1}
.oc-status{margin:0;min-height:18px;font-size:13px;color:var(--muted)}
.oc-status-bad{color:var(--err);font-weight:600}
.oc-err{padding:8px 10px;border:1px solid var(--err);border-radius:6px;background:#fdecec;color:var(--err)}
.oc-empty{padding:16px;color:var(--muted)}
.oc-pill{display:inline-block;padding:0 6px;border-radius:9px;background:var(--panel2);font-size:12px;line-height:18px;color:var(--ink)}
.oc-pill-err{background:#fdecec;color:var(--err)}
.oc-pill-ok{background:#e6f4ee;color:var(--ok)}
.oc-pill-old{background:#fff4e0;color:var(--warn)}
.oc-a{border:0;background:none;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline;font:inherit}
.oc-req{color:var(--err);font-size:12px}

/* 列表 */
.oc-lhead{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.oc-lhead h3{margin:0 0 4px}
.oc-new{display:flex;gap:6px;flex-wrap:wrap}
.oc-new input{min-width:240px;max-width:100%;padding:5px 8px;border:1px solid var(--line);border-radius:6px}
.oc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:10px}
.oc-citem{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:10px 12px;cursor:pointer}
.oc-citem:hover,.oc-citem:focus{border-color:var(--accent);outline:none}
.oc-citem h4{margin:0 0 4px;font-size:15px;overflow-wrap:anywhere}
.oc-citem p{margin:3px 0;font-size:13px}
.oc-citem-bad{cursor:default;border-color:var(--err)}
.oc-del{position:absolute;top:8px;right:8px;font-size:12px}

/* 顶栏 */
.oc-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.oc-title{margin:0;font-size:15px;overflow-wrap:anywhere}
.oc-badge{display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:9px;background:var(--panel2);font-size:12px;line-height:18px;text-align:center}
.oc-badge-err{background:var(--err);color:#fff}
.oc-zoombar{display:inline-flex;gap:2px;align-items:center}
.oc-issues{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:6px 10px;max-height:200px;overflow:auto}
.oc-ihead{font-size:13px;margin-bottom:4px}
.oc-ilist{list-style:none;margin:0;padding:0}
.oc-iitem{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--line);background:none;padding:3px 8px;margin:2px 0;font-size:13px;cursor:pointer;color:var(--ink)}
.oc-iitem:hover{background:var(--panel2)}
.oc-lv-error{border-left-color:var(--err)}
.oc-lv-warning{border-left-color:var(--warn)}
.oc-lv-info{border-left-color:var(--accent)}
.oc-ilv{color:var(--muted);font-size:12px}
.oc-ibar{margin:4px 0;padding:3px 8px;border-left:3px solid var(--line);background:var(--panel2);font-size:12px}

/* 三栏 */
.oc-body{display:grid;grid-template-columns:240px minmax(0,1fr) 300px;gap:8px;align-items:stretch;min-height:520px}
.oc-left,.oc-right{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:8px 10px;min-width:0;max-height:calc(100vh - 230px);overflow:auto;font-size:13px}
.oc-board{border:1px solid var(--line);border-radius:8px;background:var(--panel2);min-width:0;position:relative}
.oc-scroll{overflow:auto;height:calc(100vh - 230px);min-height:480px;outline:none}
.oc-svg{display:block;user-select:none;-webkit-user-select:none}
@media (max-width:1100px){.oc-body{grid-template-columns:200px minmax(0,1fr)}.oc-right{grid-column:1 / -1;max-height:none}}
@media (max-width:760px){.oc-body{grid-template-columns:minmax(0,1fr)}.oc-left{max-height:240px}.oc-scroll{height:60vh}}

/* 素材 */
.oc-tabs{display:flex;gap:4px;margin-bottom:6px}
.oc-tabs button{flex:1;border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:3px 6px;cursor:pointer}
.oc-tabs .oc-tab-on{background:var(--accent-soft);border-color:var(--accent);font-weight:600}
.oc-search{width:100%;box-sizing:border-box;padding:4px 8px;border:1px solid var(--line);border-radius:6px}
.oc-hint{margin:4px 0}
.oc-pal{list-style:none;margin:0;padding:0}
.oc-pitem{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:center;padding:5px 6px;border-radius:6px;border:1px solid transparent;cursor:grab}
.oc-pitem:hover{background:var(--panel2);border-color:var(--line)}
.oc-pitem-on{opacity:.65}
.oc-pname{flex:1 1 100%;font-weight:600;overflow-wrap:anywhere}
.oc-pid{flex:1 1 100%;overflow-wrap:anywhere}
.oc-padd{font-size:12px;padding:1px 6px}

/* 检查器 */
.oc-right h4{margin:2px 0 4px;font-size:15px;overflow-wrap:anywhere}
.oc-right h5{margin:10px 0 4px;font-size:13px}
.oc-form{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.oc-form label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted)}
.oc-form input,.oc-form select,.oc-form textarea{font:inherit;font-size:13px;color:var(--ink);padding:3px 6px;border:1px solid var(--line);border-radius:5px}
.oc-form .oc-ck{flex-direction:row;align-items:center;gap:6px;color:var(--ink)}
.oc-kv{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;margin:6px 0;font-size:13px}
.oc-kv dt{color:var(--muted)}
.oc-kv dd{margin:0;overflow-wrap:anywhere}
.oc-uses,.oc-help{margin:0;padding-left:16px}
.oc-help li{margin:3px 0}
.oc-sw{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin:0 2px 0 4px;border:2px solid transparent}
.oc-sw-ok{background:#2f9e6a}
.oc-sw-convert{background:#d9a21b}
.oc-sw-no{background:#b8bec8}
.oc-sw-need{border-color:var(--err);background:#fff}

/* 抽屉 */
.oc-drawer{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:6px 10px}
.oc-dhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px;font-size:13px}
.oc-dscroll{max-height:320px;overflow:auto}
.oc-dtable{width:100%;border-collapse:collapse;font-size:13px}
.oc-dtable th{position:sticky;top:0;background:var(--panel);text-align:left;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line);padding:4px 6px}
.oc-dtable td{border-bottom:1px solid var(--line);padding:4px 6px;vertical-align:top}
.oc-dtable select,.oc-pin{font:inherit;font-size:13px;padding:2px 5px;border:1px solid var(--line);border-radius:5px;max-width:220px}
.oc-pin-s{width:64px}
.oc-pin-m{width:120px;margin-left:4px}
textarea.oc-pin{width:180px}
.oc-drow-empty td{color:var(--muted)}
.oc-drow-need{background:#fdf3f3}
.oc-drow.oc-sel{outline:2px solid var(--accent);outline-offset:-2px}
.oc-dst{white-space:nowrap}
.oc-sbtn{font-size:12px;padding:1px 6px;margin-right:2px;border:1px solid var(--line);border-radius:5px;background:var(--panel);cursor:pointer}
.oc-s-ok.oc-s-on{background:#e6f4ee;border-color:var(--ok);color:var(--ok);font-weight:600}
.oc-s-question.oc-s-on{background:#fff4e0;border-color:var(--warn);color:var(--warn);font-weight:600}
.oc-s-rejected.oc-s-on{background:#fdecec;border-color:var(--err);color:var(--err);font-weight:600}

/* SVG 画布 */
.oc-svg text{font-size:13px;fill:var(--ink)}
.oc-card{fill:var(--panel);stroke:#9aa5b4;stroke-width:1}
.oc-node-table .oc-card{stroke:var(--c-table,#4a6b4e)}
.oc-head{fill:#e9eef5;stroke:none;cursor:move}
.oc-node-table .oc-head{fill:#e4efe6}
.oc-head-note{fill:#fff6d9}
.oc-htext{font-weight:600;pointer-events:none}
.oc-ntext{fill:var(--muted)}
.oc-node-missing .oc-card,.oc-node-rejected .oc-card{stroke-dasharray:5 4;fill:#f4f5f7}
.oc-node-missing text,.oc-node-rejected text{fill:var(--muted)}
.oc-node-rejected{opacity:.55}
.oc-node-bad .oc-card{stroke:var(--err);stroke-width:2}
.oc-node.oc-sel .oc-card{stroke:var(--accent);stroke-width:2.5}
.oc-rowbg{fill:transparent;cursor:pointer}
.oc-row:hover .oc-rowbg{fill:var(--panel2)}
.oc-row.oc-sel .oc-rowbg{fill:var(--accent-soft)}
.oc-row-error .oc-flabel{fill:var(--err)}
.oc-row-error .oc-rowbg{fill:#fdf0f0}
.oc-row-stale .oc-flabel{text-decoration:line-through}
.oc-flabel{pointer-events:none}
.oc-fmeta{fill:var(--muted) !important;pointer-events:none}
.oc-svg .oc-req{fill:var(--err)}
.oc-chip{fill:#b8bec8}
.oc-role-identifier{fill:#2159d1}.oc-role-foreign_key{fill:#6b4a6e}.oc-role-quantity{fill:#147a55}.oc-role-date{fill:#2a6a7a}
.oc-role-price{fill:#9a6b2f}.oc-role-duration{fill:#3f8f8f}.oc-role-rate{fill:#7d9184}.oc-role-status{fill:#a03028}
.oc-role-category{fill:#8a5a0e}.oc-role-parameter{fill:#536074}.oc-role-text{fill:#9aa5b4}
/* 端口：实心 = 有来源 / 已被用；红色空心 = 必填但没有来源；空心 = 没连 */
.oc-port{stroke:#7b8796;stroke-width:1.5;fill:var(--panel);cursor:crosshair}
.oc-in-on,.oc-out-on{fill:#536074;stroke:#536074}
.oc-in-need{fill:#fff;stroke:var(--err);stroke-width:2.2}
.oc-hport{fill:var(--panel);stroke:#536074;stroke-width:1.5;cursor:crosshair}
.oc-port-L,.oc-hport-L{cursor:default}
/* 拖线时目标着色：绿能连、黄要转换、灰不能连 */
.oc-dragging .oc-port-L,.oc-dragging .oc-hport-L{opacity:.35}
.oc-dragging .oc-cmp-ok,.oc-dragging .oc-cmp-convert,.oc-dragging .oc-cmp-no{opacity:1}
.oc-port.oc-cmp-ok,.oc-hport.oc-cmp-ok{fill:#2f9e6a;stroke:#1f7a50;r:7}
.oc-port.oc-cmp-convert,.oc-hport.oc-cmp-convert{fill:#d9a21b;stroke:#a87a0c;r:7}
.oc-port.oc-cmp-no,.oc-hport.oc-cmp-no{fill:#d5d9df;stroke:#b8bec8}
.oc-row.oc-cmp-ok .oc-rowbg{fill:#e6f4ee}
.oc-row.oc-cmp-convert .oc-rowbg{fill:#fff4e0}
.oc-row.oc-cmp-no{opacity:.5}
.oc-head.oc-cmp-ok{fill:#d6efe2}
.oc-head.oc-cmp-no{fill:#e4e6ea}
.oc-dragline{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:6 4;pointer-events:none}
/* 连线 */
.oc-bind{fill:none;stroke:#7d9184;stroke-width:1.4;stroke-dasharray:3 3}
.oc-edge{fill:none;stroke:#536074;stroke-width:3;cursor:pointer}
.oc-mk path{fill:#536074}
.oc-rowline{fill:none;stroke:#9aa5b4;stroke-width:1.2;cursor:pointer}
.oc-rl-ok{stroke:#2f9e6a}
.oc-rl-question{stroke:#d9a21b}
.oc-rl-bad{stroke:var(--err)}
.oc-edge.oc-on,.oc-rowline.oc-on{stroke-width:4}
.oc-rowline.oc-on{stroke-width:2}
.oc-tone-ok.oc-edge{stroke:#2f9e6a}
.oc-tone-draft.oc-edge{stroke:#7b8796}
.oc-tone-q.oc-edge{stroke:#d9a21b}
.oc-tone-bad.oc-edge{stroke:var(--err)}
.oc-tone-empty.oc-edge{stroke:#b8bec8;stroke-dasharray:6 4}
.oc-elabel{cursor:pointer}
.oc-dragging .oc-elabels{pointer-events:none}
.oc-elabel rect{fill:var(--panel);stroke:#9aa5b4}
.oc-elabel.oc-tone-ok rect{stroke:#2f9e6a}
.oc-elabel.oc-tone-q rect{stroke:#d9a21b}
.oc-elabel.oc-tone-bad rect{stroke:var(--err)}
.oc-elabel.oc-on rect{stroke-width:2}

/* 对象卡片的字段表格（onto-workbench.js 的属性区） */
.oc-attrs{display:flex;flex-direction:column;gap:4px;font-size:13px;position:relative}
.oc-at-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:6px}
.oc-at-table{border-collapse:collapse;width:100%;min-width:760px;font-size:13px}
.oc-at-table th{text-align:left;font-weight:600;color:var(--muted);background:var(--panel2);padding:3px 4px;white-space:nowrap}
.oc-at-table td{border-top:1px solid var(--line);padding:2px 4px;vertical-align:middle}
.oc-at-table input,.oc-at-table select{font:inherit;font-size:13px;padding:2px 4px;border:1px solid var(--line);border-radius:4px;background:#fff;width:100%;box-sizing:border-box;min-width:60px}
.oc-at-table input[type=checkbox]{width:auto;min-width:0}
.oc-at-table :disabled{background:var(--panel2);color:var(--muted)}
.oc-at-table .oc-at-s{min-width:48px;max-width:70px}
.oc-at-table .oc-at-m{min-width:96px}
.oc-at-ord{white-space:nowrap}
.oc-at-ord button{padding:0 4px;font-size:12px}
.oc-at-grip{cursor:grab;color:var(--muted);padding:0 2px}
.oc-at-act{white-space:nowrap}
.oc-at-act button{font-size:12px;padding:1px 6px;margin-left:2px}
.oc-at-tag{font-size:11px;margin-left:2px}
.oc-at-dirty td{background:#fffbe8}
.oc-at-nofid td{color:var(--muted)}
.oc-at-new td{background:var(--panel2)}
.oc-at-b{display:inline-block;padding:0 6px;border-radius:9px;font-size:12px;line-height:18px;white-space:nowrap}
.oc-at-b-ok{background:#e6f4ee;color:var(--ok)}
.oc-at-b-bad{background:#fdecec;color:var(--err)}
.oc-at-b-none{background:var(--panel2);color:var(--muted)}
.oc-at-hist{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:6px 10px;box-shadow:0 2px 8px rgba(0,0,0,.08);max-height:320px;overflow:auto}
.oc-at-hhead{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.oc-at-hlist{margin:0;padding-left:18px}
.oc-at-hlist>li{margin:4px 0}
.oc-at-hlist ul{margin:2px 0;padding-left:16px}

.oc-more{cursor:pointer;text-decoration:underline;fill:#4a6fa5}
.oc-row-quiet .oc-port{opacity:0}
.oc-row-quiet:hover .oc-port,.oc-dragging .oc-row-quiet .oc-port{opacity:1}
/* 拖线时没连线的行照样按能不能连着色：落点口先压暗，能连/要转换/不能连的再亮出来 */
.oc-dragging .oc-row-quiet .oc-port-L{opacity:.35}
.oc-dragging .oc-row-quiet .oc-cmp-ok,.oc-dragging .oc-row-quiet .oc-cmp-convert,.oc-dragging .oc-row-quiet .oc-cmp-no{opacity:1}
/* B3：直角连线、徽标、血缘、规则卡、就地改名、检查器分段按钮 */
.oc-hitline{fill:none;stroke:transparent;stroke-width:12;cursor:pointer}
.oc-rowline.oc-fade{opacity:.25}
.oc-rowline.oc-on{stroke:var(--accent,#2f6fdb)}
.oc-rl-rule{stroke:#8a63d2;stroke-dasharray:4 3}
.oc-wbadge{cursor:pointer}
.oc-wbadge circle{fill:var(--panel,#fff);stroke:#7b8796;stroke-width:1.2}
.oc-wbadge text{font-size:13px;fill:#3d4756;font-weight:600}
.oc-wbadge.oc-on circle{stroke:var(--accent,#2f6fdb);stroke-width:2}
.oc-row.oc-lin .oc-rowbg{fill:#eaf1fd}
.oc-head-rule{fill:#ece4fa}
.oc-htext-rule{fill:#5b3b9e}
.oc-node-rule .oc-card{stroke:#b9a3e6}
.oc-cond{fill:#3d4756}
.oc-thr{fill:#5b3b9e;font-weight:600;cursor:ew-resize;text-decoration:underline dotted}
.oc-smp{fill:#5f6b7a}
.oc-addf,.oc-radd{cursor:pointer}
.oc-addt{fill:#5f6b7a}
.oc-dragging .oc-row.oc-cmp-ok .oc-rowbg{stroke:#2f9e6a;stroke-width:1.5;stroke-dasharray:5 3}
.oc-dragging .oc-row.oc-cmp-convert .oc-rowbg{stroke:#d9a21b;stroke-width:1.5;stroke-dasharray:5 3}
.oc-inline{position:absolute;z-index:3;font-size:13px;padding:0 6px;border:1px solid var(--accent,#2f6fdb);border-radius:4px;box-sizing:border-box;background:var(--panel,#fff)}
.oc-seg{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.oc-seg button{font-size:13px;padding:2px 8px}
.oc-seg .oc-seg-on{background:var(--accent-soft,#e3ecfb);border-color:var(--accent,#2f6fdb)}
.oc-crow{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:4px 0}
.oc-crow select,.oc-crow input{font-size:13px;max-width:100%}
.oc-srcs{list-style:none;margin:4px 0;padding:0}
.oc-srcs li{border-top:1px solid var(--line,#e3e6ea);padding:6px 0}
.oc-quote{border-left:2px solid #b9a3e6;padding-left:8px;margin:4px 0;color:#3d4756}
.oc-quote mark{background:#fff1b8}
.oc-mean dd{overflow-wrap:anywhere}
.oc-warn{color:#a87a0c}