/* ============================================================
   团队大脑 · OKR（brain_okr.js）：OKR 页 / 订阅·OKR 页
   类名 ds-bn-okr- 前缀；只用设计令牌 var(--xxx)，深色模式自动跟随。
   ============================================================ */

.ds-bn-okr { display: flex; flex-direction: column; gap: .8em; min-width: 0; position: relative; }
.ds-bn-okr-head { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; }
.ds-bn-okr-monthnav { display: flex; align-items: center; gap: .5em; white-space: nowrap; }
.ds-bn-okr-monthlabel { font-weight: 650; color: var(--text); min-width: 7.5em; text-align: center; white-space: nowrap; }
.ds-bn-okr-avg { white-space: nowrap; color: var(--text-2); }
.ds-bn-okr-avg b { color: var(--primary); font-size: 16px; }
.ds-bn-okr-tip {
  background: var(--info-bg); color: var(--info); border-radius: var(--radius-sm);
  padding: .45em .8em; font-size: 12.5px;
}
.ds-bn-okr-tabs { margin: 0; }
.ds-bn-okr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1em; align-items: start; }
.ds-bn-okr-layout > * { min-width: 0; }
@media (max-width: 1100px) { .ds-bn-okr-layout { grid-template-columns: minmax(0, 1fr); } }
.ds-bn-okr-main, .ds-bn-okr-side { display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.ds-bn-okr-danger { color: var(--danger); }
.ds-bn-okr-lbl { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; color: var(--text-2); font-size: 12.5px; }
.ds-bn-okr-num { width: 7em; }
.ds-bn-okr-form { display: flex; flex-direction: column; gap: .6em; }
.ds-bn-okr-form .ds-input, .ds-bn-okr-form .ds-textarea { box-sizing: border-box; }
.ds-bn-okr-form > .ds-input, .ds-bn-okr-form > .ds-textarea { width: 100%; }

/* 目标 O */
.ds-bn-okr-board { display: flex; flex-direction: column; gap: .8em; }
.ds-bn-okr-obj { padding: .9em 1em; display: flex; flex-direction: column; gap: .5em; }
.ds-bn-okr-obj.dragging, .ds-bn-okr-kr.dragging { opacity: .5; }
.ds-bn-okr-obj-head { display: flex; align-items: center; gap: .5em; min-width: 0; }
.ds-bn-okr-obj-title { font-weight: 650; font-size: 15px; color: var(--text); min-width: 0; flex: 1; word-break: break-word; }
.ds-bn-okr-obj-avg { white-space: nowrap; color: var(--primary); font-weight: 650; }
.ds-bn-okr-obj-acts { display: flex; gap: .6em; white-space: nowrap; flex-wrap: wrap; justify-content: flex-end; }
.ds-bn-okr-handle { cursor: grab; color: var(--muted); user-select: none; letter-spacing: -2px; padding: 0 .2em; white-space: nowrap; }
.ds-bn-okr-handle:active { cursor: grabbing; }
.ds-bn-okr-tag {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  background: var(--primary); color: var(--on-primary); border-radius: 6px; font-size: 11.5px; font-weight: 700;
  padding: .1em .45em; min-width: 2em;
}
.ds-bn-okr-tag.kr { background: var(--info-bg); color: var(--info); }
.editable[data-edit] { cursor: text; border-radius: 4px; }
.editable[data-edit]:hover { background: var(--hover); }
.ds-bn-okr-inline { flex: 1; min-width: 0; }

/* KR */
.ds-bn-okr-krs { display: flex; flex-direction: column; gap: .4em; }
.ds-bn-okr-nokr { font-size: 12.5px; padding: .2em 0 .2em 2em; }
.ds-bn-okr-kr { border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: .55em .7em; display: flex; flex-direction: column; gap: .35em; background: var(--card-bg); }
.ds-bn-okr-kr.dropped { opacity: .65; }
.ds-bn-okr-kr.done .ds-bn-okr-kr-title { color: var(--text-2); }
.ds-bn-okr-kr-main { display: flex; align-items: center; gap: .5em; min-width: 0; }
.ds-bn-okr-kr-title { flex: 1; min-width: 0; color: var(--text); word-break: break-word; }
.ds-bn-okr-kr-main .ds-badge { white-space: nowrap; }
.ds-bn-okr-kr-bar { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.ds-bn-okr-range { flex: 1 1 160px; min-width: 120px; max-width: 320px; accent-color: var(--primary); }
.ds-bn-okr-pct { font-weight: 700; color: var(--primary); min-width: 3em; white-space: nowrap; }
.ds-bn-okr-vals, .ds-bn-okr-due { white-space: nowrap; }
.ds-bn-okr-overdue { color: var(--danger); font-weight: 600; white-space: nowrap; }
.ds-bn-okr-warn {
  background: var(--warning-bg); color: var(--warning); border-radius: var(--radius-sm);
  padding: .35em .7em; font-size: 12.5px;
}
.ds-bn-okr-warn .ds-link-btn { font-size: 12.5px; }
.ds-bn-okr-kr-acts { display: flex; gap: .8em; flex-wrap: wrap; font-size: 12.5px; }
.ds-bn-okr-kr-acts .ds-link-btn { white-space: nowrap; }
.ds-bn-okr-cmt { padding: .3em 0 .2em; }
.ds-bn-okr-addkr { display: flex; flex-direction: column; gap: .5em; border-top: 1px dashed var(--border); padding-top: .6em; }
.ds-bn-okr-addkr > .ds-input, .ds-bn-okr-addkr .inp-clear-wrap { width: 100%; box-sizing: border-box; }
.ds-bn-okr-addkr-btn { align-self: flex-start; }
.ds-bn-okr-addobj { display: flex; gap: .6em; align-items: center; }
.ds-bn-okr-addobj .ds-input, .ds-bn-okr-addobj .inp-clear-wrap { flex: 1; min-width: 0; }
.ds-bn-okr-addobj .inp-clear-wrap .ds-input { width: 100%; box-sizing: border-box; }

/* 进展记录 */
.ds-bn-okr-logs { display: flex; flex-direction: column; gap: .25em; padding-left: 2.2em; }
.ds-bn-okr-log { display: flex; align-items: baseline; gap: .5em; font-size: 12.5px; color: var(--text-2); min-width: 0; }
.ds-bn-okr-log-time { color: var(--muted); white-space: nowrap; }
.ds-bn-okr-log-p { color: var(--primary); font-weight: 600; white-space: nowrap; }
.ds-bn-okr-log-c { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; }
.ds-bn-okr-log-acts { display: flex; gap: .5em; white-space: nowrap; }
.ds-bn-okr-logform { display: flex; flex-direction: column; gap: .4em; padding-left: 2.2em; }
.ds-bn-okr-logform .ds-textarea { width: 100%; box-sizing: border-box; }

/* 空态引导 */
.ds-bn-okr-guide { padding: 1.2em 1.4em; }
.ds-bn-okr-guide-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: .4em; }
.ds-bn-okr-guide-desc { color: var(--text-2); line-height: 1.8; }
.ds-bn-okr-guide-steps { margin: .6em 0 0; padding-left: 1.4em; color: var(--text-2); line-height: 1.9; }

/* AI 点评卡 */
.ds-bn-okr-review { padding: .9em 1em; display: flex; flex-direction: column; gap: .5em; }
.ds-bn-okr-rv-top { display: flex; align-items: center; gap: .6em; }
.ds-bn-okr-rv-title { font-weight: 700; color: var(--text); display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; min-width: 0; flex: 1; }
.ds-bn-okr-rv-title .ds-text-muted { font-weight: 400; font-size: 12px; }
.ds-bn-okr-rv-tip { font-size: 12px; color: var(--muted); line-height: 1.7; }
.ds-bn-okr-rv-empty { font-size: 12.5px; line-height: 1.7; }
.ds-bn-okr-review > .ds-btn { align-self: flex-start; }
.ds-bn-okr-rv-score { display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap; }
.ds-bn-okr-rv-num { font-size: 30px; font-weight: 800; color: var(--primary); line-height: 1.1; }
.ds-bn-okr-rv-level { font-weight: 650; color: var(--text-2); white-space: nowrap; }
.ds-bn-okr-rv-level.good { color: var(--success); }
.ds-bn-okr-rv-level.bad { color: var(--danger); }
.ds-bn-okr-rv-delta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ds-bn-okr-rv-sum { color: var(--text-2); line-height: 1.7; font-size: 13px; }
.ds-bn-okr-rv-note { font-size: 12.5px; color: var(--text-2); background: var(--hover); border-radius: var(--radius-sm); padding: .45em .7em; line-height: 1.7; }
.ds-bn-okr-rv-h { font-weight: 650; color: var(--text); font-size: 13px; margin-top: .3em; }
.ds-bn-okr-rv-list { margin: 0; padding-left: 1.3em; color: var(--text-2); font-size: 12.5px; line-height: 1.75; }
.ds-bn-okr-rv-list.good li::marker { color: var(--success); }
.ds-bn-okr-rv-list.warn li::marker { color: var(--warning); }
.ds-bn-okr-rv-foot { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.ds-bn-okr-dims { display: flex; flex-direction: column; gap: .45em; }
.ds-bn-okr-dim-head { display: flex; justify-content: space-between; gap: .6em; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.ds-bn-okr-dim-bar { height: 6px; border-radius: 3px; background: var(--border-2); overflow: hidden; margin-top: .2em; }
.ds-bn-okr-dim-bar span { display: block; height: 100%; background: var(--primary); border-radius: 3px; width: 0; }
.ds-bn-okr-dim-c { font-size: 12px; color: var(--muted); margin-top: .2em; line-height: 1.6; }
.ds-bn-okr-dim-bar span.w0 { width: 0%; }
.ds-bn-okr-dim-bar span.w5 { width: 5%; }
.ds-bn-okr-dim-bar span.w10 { width: 10%; }
.ds-bn-okr-dim-bar span.w15 { width: 15%; }
.ds-bn-okr-dim-bar span.w20 { width: 20%; }
.ds-bn-okr-dim-bar span.w25 { width: 25%; }
.ds-bn-okr-dim-bar span.w30 { width: 30%; }
.ds-bn-okr-dim-bar span.w35 { width: 35%; }
.ds-bn-okr-dim-bar span.w40 { width: 40%; }
.ds-bn-okr-dim-bar span.w45 { width: 45%; }
.ds-bn-okr-dim-bar span.w50 { width: 50%; }
.ds-bn-okr-dim-bar span.w55 { width: 55%; }
.ds-bn-okr-dim-bar span.w60 { width: 60%; }
.ds-bn-okr-dim-bar span.w65 { width: 65%; }
.ds-bn-okr-dim-bar span.w70 { width: 70%; }
.ds-bn-okr-dim-bar span.w75 { width: 75%; }
.ds-bn-okr-dim-bar span.w80 { width: 80%; }
.ds-bn-okr-dim-bar span.w85 { width: 85%; }
.ds-bn-okr-dim-bar span.w90 { width: 90%; }
.ds-bn-okr-dim-bar span.w95 { width: 95%; }
.ds-bn-okr-dim-bar span.w100 { width: 100%; }

/* 月报 */
.ds-bn-okr-report { padding: .9em 1em; display: flex; flex-direction: column; gap: .8em; }
.ds-bn-okr-rep-top { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.ds-bn-okr-rep-top .ds-bn-okr-rv-title { flex: 0 1 auto; }
.ds-bn-okr-unsaved { color: var(--warning); font-size: 12px; white-space: nowrap; }
.ds-bn-okr-sec { display: flex; flex-direction: column; gap: .35em; }
.ds-bn-okr-sec-name { font-weight: 650; color: var(--text); border-left: 3px solid var(--accent); padding-left: .5em; }
.ds-bn-okr-tb { display: flex; gap: .2em; flex-wrap: wrap; }
.ds-bn-okr-tb button {
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text-2); border-radius: 5px;
  min-width: 28px; height: 26px; cursor: pointer; font-size: 12.5px; font-family: inherit;
}
.ds-bn-okr-tb button:hover { background: var(--hover); color: var(--text); }
.ds-bn-okr-editor { line-height: 1.8; color: var(--text); word-break: break-word; min-height: 1.8em; }
.ds-bn-okr-editor.editable {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .6em .8em; min-height: 90px;
  background: var(--card-bg); outline: none;
}
.ds-bn-okr-editor.editable:focus { border-color: var(--accent); box-shadow: var(--ring); }
.ds-bn-okr-editor.editable:empty::before { content: attr(data-ph); color: var(--muted); }
.ds-bn-okr-editor h1, .ds-bn-okr-editor h2, .ds-bn-okr-editor h3 { font-size: 14.5px; margin: .4em 0 .2em; }
.ds-bn-okr-editor ul, .ds-bn-okr-editor ol { padding-left: 1.4em; margin: .3em 0; }
.ds-bn-okr-editor blockquote { border-left: 3px solid var(--border); margin: .4em 0; padding-left: .8em; color: var(--text-2); }
.ds-bn-okr-editor p { margin: .2em 0; }
.ds-bn-okr-editor img { max-width: 100%; }
.ds-bn-okr-tpl-row { display: flex; align-items: center; gap: .5em; margin-bottom: .5em; }
.ds-bn-okr-tpl-row .ds-input, .ds-bn-okr-tpl-row .inp-clear-wrap { flex: 1; min-width: 0; }
.ds-bn-okr-tpl-row .ds-badge { white-space: nowrap; }
.ds-bn-okr-rep-cmt { border-top: 1px solid var(--border-2); padding-top: .5em; }

/* 同事改动待确认 */
.ds-bn-okr-prop { border: 1px solid var(--warning); background: var(--warning-bg); border-radius: var(--radius-sm); padding: .6em .9em; display: flex; flex-direction: column; gap: .6em; }
.ds-bn-okr-prop-head { display: flex; align-items: center; gap: .6em; color: var(--text); flex-wrap: wrap; }
.ds-bn-okr-prop-item { background: var(--card-bg); border-radius: var(--radius-sm); padding: .55em .8em; display: flex; flex-direction: column; gap: .3em; }
.ds-bn-okr-prop-what { color: var(--text); word-break: break-word; }

/* OKR 教练抽屉 */
.ds-bn-okr-coach {
  position: fixed; top: 64px; right: 16px; bottom: 16px; width: min(440px, 94vw); z-index: 900;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; overflow: hidden;
}
.ds-bn-okr-coach[hidden] { display: none; }
.ds-bn-okr-coach-head { display: flex; align-items: center; gap: .5em; padding: .7em .9em; border-bottom: 1px solid var(--border-2); }
.ds-bn-okr-coach-msgs { flex: 1; overflow-y: auto; padding: .8em .9em; display: flex; flex-direction: column; gap: .6em; }
.ds-bn-okr-coach-empty { font-size: 12.5px; line-height: 1.7; }
.ds-bn-okr-coach-msg { max-width: 92%; border-radius: var(--radius-sm); padding: .5em .75em; font-size: 13px; }
.ds-bn-okr-coach-msg.user { align-self: flex-end; background: var(--info-bg); color: var(--text); }
.ds-bn-okr-coach-msg.assistant { align-self: flex-start; background: var(--hover); color: var(--text); }
.ds-bn-okr-coach-input { display: flex; gap: .5em; align-items: flex-end; padding: .6em .9em; border-top: 1px solid var(--border-2); }
.ds-bn-okr-coach-input .ds-textarea { flex: 1; min-width: 0; box-sizing: border-box; resize: none; }

/* 订阅·OKR */
.ds-bn-okr-people { padding: .7em; display: flex; flex-direction: column; gap: .2em; max-height: calc(100vh - 180px); overflow-y: auto; }
.ds-bn-okr-filter { margin-bottom: .4em; }
.ds-bn-okr-person { display: flex; align-items: center; gap: .5em; padding: .45em .5em; border-radius: var(--radius-sm); cursor: pointer; min-width: 0; }
.ds-bn-okr-person:hover { background: var(--hover); }
.ds-bn-okr-person.on { background: var(--info-bg); }
.ds-bn-okr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex: none; }
.ds-bn-okr-dot.green { background: var(--success); }
.ds-bn-okr-dot.red { background: var(--danger); }
.ds-bn-okr-pname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.ds-bn-okr-pmeta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ds-bn-okr-right { display: flex; flex-direction: column; gap: .8em; min-width: 0; }
.ds-bn-okr-phead { padding: .8em 1em 0; display: flex; flex-direction: column; gap: .5em; }
.ds-bn-okr-pt { font-size: 16px; font-weight: 700; color: var(--text); display: flex; gap: .6em; align-items: baseline; white-space: nowrap; }
.ds-bn-okr-pt .ds-text-muted { font-size: 12.5px; font-weight: 400; }
.ds-bn-okr-pstats { display: flex; gap: 1em; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.ds-bn-okr-pstats > span { white-space: nowrap; }
.ds-bn-okr-phead .ds-tabs { margin: 0; }
.ds-bn-okr-nudge-list { max-height: 45vh; overflow-y: auto; }
/* ds-textarea 默认 110px 高，放在 KR 行/弹窗里太占地方 */
.ds-bn-okr-logform .ds-textarea, .ds-bn-okr-form .ds-textarea, .ds-bn-okr-coach-input .ds-textarea { min-height: 60px; }