/* 字段流向（web/onto-atlas-flow.js）。只用 .at-f- 开头的类，配色沿用 style.css 的变量。1440 宽下 6 行映射一屏看全，不出横向滚动条。 */
.at-f-root{display:flex;flex-direction:column;gap:10px;min-width:0;font-size:13px}
.at-f-grey{color:var(--muted);font-size:12px}
.at-f-pad{padding:8px 4px}
.at-f-spacer{flex:1}
.at-f-num{text-align:right;white-space:nowrap}
.at-f-err{color:var(--err);font-size:12px}
.at-f-btn{padding:3px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);cursor:pointer;font-size:12px;color:var(--ink)}
.at-f-btn:hover{background:var(--line2)}
.at-f-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.at-f-primary:hover{filter:brightness(1.08);background:var(--accent)}
.at-f-danger{border-color:var(--err);color:var(--err)}
.at-f-mini{margin-left:4px;padding:0 5px;border:1px solid var(--line);border-radius:4px;background:var(--panel);font-size:11px;color:var(--muted);cursor:pointer}
.at-f-mini:hover{color:var(--accent);border-color:var(--accent)}
.at-f-link{border:0;background:none;padding:0 0 0 8px;color:var(--accent);cursor:pointer;font-size:12px;text-decoration:underline}

/* 链条卡 */
.at-f-chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}
.at-f-arrow{align-self:center;color:var(--faint);font-size:16px}
.at-f-card{display:flex;flex-direction:column;gap:2px;min-width:150px;max-width:260px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);text-align:left;cursor:pointer;color:var(--ink)}
.at-f-card:hover{border-color:var(--accent)}
.at-f-card-table{background:var(--panel2)}
.at-f-ckind{font-size:11px;color:var(--muted)}
.at-f-ctitle{font-weight:600;overflow-wrap:anywhere}
.at-f-cstat{font-size:12px;color:var(--muted)}
.at-f-tables{display:flex;flex-direction:column;gap:2px}

/* 关系块 */
.at-f-list{display:flex;flex-direction:column;gap:10px}
.at-f-block{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:8px 10px;min-width:0}
.at-f-idle{padding:5px 10px;background:var(--panel2)}
.at-f-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.at-f-ltext{color:var(--muted);overflow-wrap:anywhere}
.at-f-bhead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.at-f-btitle{font-weight:600;font-size:14px;overflow-wrap:anywhere}
.at-f-bmeta{color:var(--muted);font-size:12px}
.at-f-join{margin:2px 0 6px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.at-f-lock{margin:2px 0 6px;padding:3px 8px;border-radius:4px;background:var(--panel2);color:var(--muted);font-size:12px}
.at-f-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:2px 0 6px;padding:4px 8px;border-radius:4px;font-size:12px}
.at-f-note-ok{background:#e6f4ee;color:var(--ok)}
.at-f-note-info{background:var(--panel2);color:var(--ink)}
.at-f-note-bad{background:#fdecec;color:var(--err)}

/* 映射表 */
.at-f-twrap{overflow-x:auto}
.at-f-table{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:auto}
.at-f-table th,.at-f-table td{padding:4px 6px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
.at-f-table th{font-weight:600;color:var(--muted);font-size:12px;white-space:nowrap}
.at-f-row:hover{background:var(--accent-soft)}
.at-f-c-src,.at-f-c-dst{min-width:150px}
.at-f-c-tf{min-width:150px}
.at-f-c-st{white-space:nowrap;width:1%}
.at-f-c-ck{white-space:nowrap;width:1%}
.at-f-c-rf{width:1%}
.at-f-c-op{white-space:nowrap;width:1%}
.at-f-ctable{margin:2px 0 6px}
/* 对象卡里的流向页签（右栏 440 宽）：三列收窄、单元格折行，不出横向滚动 */
.at-f-tab .at-f-c-src,.at-f-tab .at-f-c-dst,.at-f-tab .at-f-c-tf{min-width:72px}
.at-f-tab .at-f-table{font-size:12px}
.at-f-tab .at-f-table th,.at-f-tab .at-f-table td{padding:3px 4px}
.at-f-tab .at-f-c-st,.at-f-tab .at-f-c-ck,.at-f-tab .at-f-c-op{white-space:normal}
.at-f-chip{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px;max-width:100%;padding:1px 7px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;font-size:12.5px;color:var(--ink);text-align:left}
.at-f-chip:hover{border-color:var(--accent);color:var(--accent)}
.at-f-miss{border-style:dashed;color:var(--muted)}
.at-f-cn{overflow-wrap:anywhere}
.at-f-unit{font-size:11px;color:var(--muted)}
.at-f-col{font-size:11px;color:var(--accent)}
.at-f-tft{color:var(--ink)}
.at-f-k-unit{color:var(--warn);font-weight:600}
.at-f-pill{display:inline-block;padding:0 6px;border-radius:9px;background:var(--panel2);font-size:12px;line-height:18px}
.at-f-st-ok{background:#e6f4ee;color:var(--ok)}
.at-f-st-question{background:#fff4e0;color:var(--warn)}
.at-f-st-rejected{background:#fdecec;color:var(--err)}
.at-f-dot{display:inline-block;margin-right:3px;padding:0 4px;border-radius:4px;font-size:11px;line-height:16px;background:var(--panel2);color:var(--muted);cursor:help}
.at-f-dot-error{background:#fdecec;color:var(--err)}
.at-f-dot-warn{background:#fff4e0;color:var(--warn)}
.at-f-warn{color:var(--warn);font-size:12px;margin-right:4px}

/* 必填未映射的黄条 */
.at-f-need{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px;padding:5px 8px;border-radius:6px;background:#fff4e0;color:var(--warn);font-size:12.5px}
.at-f-needl{font-weight:600}
.at-f-needbtn{padding:0 8px;border:1px solid var(--warn);border-radius:10px;background:#fffaf0;color:var(--warn);cursor:pointer;font-size:12.5px}
.at-f-needbtn:hover{background:var(--warn);color:#fff}
.at-f-needtxt{padding:0 4px}

/* 表单 */
.at-f-form{margin-top:8px;padding:8px 10px;border:1px solid var(--accent);border-radius:8px;background:var(--accent-soft)}
.at-f-ftitle{font-weight:600;margin-bottom:6px}
.at-f-fbody{display:flex;flex-direction:column;gap:6px}
.at-f-lab{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;font-size:12px}
.at-f-lab>span{min-width:64px;color:var(--muted);padding-top:4px}
.at-f-in{padding:3px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font-size:12.5px;max-width:100%;min-width:0}
.at-f-ta{min-width:220px;min-height:60px;font-family:inherit}
.at-f-tf{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.at-f-tfp{display:flex;flex-wrap:wrap;gap:6px}
.at-f-tfp .at-f-lab>span{min-width:0}
.at-f-bar{display:flex;gap:6px;margin-top:4px}
.at-f-pairs{display:flex;flex-direction:column;gap:4px}
.at-f-pair{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.at-f-eq{color:var(--muted)}
@media (max-width:900px){.at-f-card{min-width:120px}.at-f-c-src,.at-f-c-dst,.at-f-c-tf{min-width:110px}}