/* 益丰排班本体 · 页面样式（叠加在 roster.css / approve.css 之上） */
.on .on-top { padding-top: 150px; }
.on-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 720px; margin: 44px auto 0; text-align: center; }
.on-kpis div { background: #fff; border-radius: 18px; padding: 16px 10px; }
.on-kpis b { display: block; font-size: 40px; letter-spacing: -.02em; color: var(--yf); }
.on-kpis span { font-size: 13px; color: var(--ink-2); }

/* 图谱 */
.on-board { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; margin-top: 48px; }
.on-gwrap { background: var(--bg-light); border-radius: 22px; padding: 14px; min-width: 0; }
.on-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--ink-2); padding: 2px 4px 8px; }
.on-legend span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -2px; background: var(--b); box-shadow: inset 0 0 0 1.5px var(--c); }
.on-g { width: 100%; height: auto; display: block; font-family: var(--font); }
.on-g .oe { stroke: #d2d2d7; stroke-width: 1.2; transition: stroke .3s, opacity .3s; }
.on-g .oe.on { stroke: #6e6e73; stroke-width: 1.8; }
.on-g .ol rect { fill: #fff; stroke: #d2d2d7; }
.on-g .ol text { font-size: 11px; fill: var(--ink); text-anchor: middle; }
.on-node { cursor: pointer; transition: opacity .3s; }
.on-node rect { stroke-width: 1.5; transition: stroke-width .2s; }
.on-node text { font-size: 14px; font-weight: 600; text-anchor: middle; }
.on-node.pick rect { stroke-width: 3; }
.on-node.dim { opacity: .32; }
.on-node:hover rect, .on-node:focus-visible rect { stroke-width: 3; }
.on-node:focus { outline: none; }
.on-detail { background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 0 0 1px #ececf0; align-self: start; display: grid; gap: 6px; }
.od-h { display: grid; gap: 4px; }
.od-tag { justify-self: start; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.od-h h3 { font-size: 24px; letter-spacing: -.01em; }
.od-h > span:last-child { font-size: 12.5px; color: var(--ink-2); }
.od-k { font-size: 11.5px; font-weight: 700; color: var(--yf); margin-top: 8px; }
.od-attrs, .od-rules { display: flex; flex-wrap: wrap; gap: 6px; }
.od-attrs span { font-size: 12.5px; background: var(--bg-light); border-radius: 8px; padding: 3px 9px; }
.od-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.od-list li { font-size: 13px; color: var(--ink-2); }
.od-list li b { color: var(--ink); }
.od-rules a { text-decoration: none; }
.od-ex { font-size: 13px; line-height: 1.5; background: #ecfdf5; border-radius: 10px; padding: 9px 11px; }

/* 规则与动作表 */
.mt-b.st-r { background: #ffe5e3; color: #c1271c; } .mt-b.st-o { background: #fff1e0; color: #b25000; }
.mt-b.st-g { background: #dcfce7; color: var(--ok); } .mt-b.st-b { background: #e0edff; color: #0055b3; }
.mt-b.st-p { background: #f3e8ff; color: #7e22ce; }
.on-rwrap { margin-top: 40px; }
.on-seg { margin: 0 0 12px; background: #e8e8ed; max-width: 100%; }
.on-seg button em { font-style: normal; font-size: 11px; color: var(--ink-2); margin-left: 4px; }
.on-rtable { min-width: 960px; }
.on-rtable tr.hl td { background: #fffbe6; }
.on-expr { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px; color: #4338ca; background: #f5f3ff; border-radius: 6px; padding: 2px 6px; display: inline-block; line-height: 1.5; }
.on-awrap { margin-top: 40px; }

/* 决策追溯 */
.on-tr { margin-top: 40px; background: #fff; border-radius: 24px; padding: 18px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.05); }
.on-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1.4fr auto 1fr auto 1fr; align-items: stretch; gap: 6px; margin-top: 14px; }
.tc { border-radius: 14px; padding: 12px; background: var(--bg-light); display: grid; gap: 5px; align-content: start; min-width: 0; animation: apIn .4s var(--ease); }
.tc > p { font-size: 11.5px; font-weight: 700; }
.tc > span { font-size: 12.5px; line-height: 1.4; }
.tc-d > p { color: #2b6cf6; } .tc-o > p { color: #b45309; } .tc-r > p { color: #8b5cf6; } .tc-f > p { color: #008a5c; }
.tc-rules { display: flex; flex-wrap: wrap; gap: 4px; }
.tc-rules i { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px; }
.tc-rules i.ok { background: #dcfce7; color: var(--ok); } .tc-rules i.bad { background: #ff453a; color: #fff; } .tc-rules i.warn { background: #ff9f0a; color: #fff; }
.tc-m { font-size: 11.5px !important; color: var(--ink-2); }
.tc-a b { font-size: 17px; }
.tc-a.r-block b { color: #c1271c; } .tc-a.r-auto b { color: var(--ok); } .tc-a.r-mixed b { color: #b25000; } .tc-a.r-manual b { color: #7e22ce; }
.tc-arrow { align-self: center; width: 14px; height: 14px; border-top: 2px solid #c7c7cc; border-right: 2px solid #c7c7cc; transform: rotate(45deg); margin: 0 4px 0 0; }
.on-trfoot { font-size: 12px; color: var(--ink-2); margin-top: 10px; }
.on-trfoot a { color: var(--blue-link); }
.on-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.on-why div { background: #fff; border-radius: 18px; padding: 18px; }
.on-why b { font-size: 16px; }
.on-why p { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.on .cta-row { margin-top: 36px; justify-content: center; }

@media (max-width: 1068px) {
  .on-board { grid-template-columns: 1fr; }
  .on-chain { grid-template-columns: 1fr; }
  .tc-arrow { justify-self: center; transform: rotate(135deg); margin: 0; }
}
@media (max-width: 560px) {
  .on .on-top { padding-top: 110px; }
  .on-kpis { grid-template-columns: repeat(2, 1fr); }
  .on-kpis b { font-size: 32px; }
  .on-gwrap { padding: 8px; margin: 0 -6px; }
  #onGraph { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .on-g { min-width: 620px; }
  .on-why { grid-template-columns: 1fr; }
  .on-tr { padding: 14px 12px; }
}
@media (prefers-reduced-motion: reduce) { .tc { animation: none; } }