/* C×L 认知坐标：卡片/详情的 L·C 徽章 + 能力画像详情弹窗里的库存格子 */

/* ── 认知海拔徽章：L1 灰(事实) / L2 蓝(机制) / L3 琥珀(迁移) / L4 主色(重构) ── */
.kind-badge.caplv { font-weight: 600; letter-spacing: 0.02em; cursor: help; }
.kind-badge.caplv.l1 { background: #eeede8; color: #6b6a63; }
.kind-badge.caplv.l2 { background: var(--follow-soft); color: var(--follow); }
.kind-badge.caplv.l3 { background: var(--star-soft); color: var(--star); }
.kind-badge.caplv.l4 { background: var(--accent-soft); color: var(--accent-hover); box-shadow: inset 0 0 0 1px var(--accent); }

/* ── 划词工具条 · L1-L4 自标（深色工具条上的小圆点按钮，同一套 caplv 配色的亮色变体） ── */
.toolbar-sep { width: 1px; align-self: stretch; background: rgba(255,255,255,0.18); margin: 2px 0; }
.toolbar-lv-lead { color: rgba(243,241,234,0.6); font-size: 11.5px; padding: 0 2px; align-self: center; white-space: nowrap; }
.toolbar-lv-pick { display: flex; gap: 4px; }
.toolbar-lv-btn {
  min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; border: none;
  font: 700 11px/26px var(--sans); cursor: pointer; transition: transform 0.12s;
}
.toolbar-lv-btn.l1 { background: rgba(238,237,232,0.18); color: #eeede8; }
.toolbar-lv-btn.l2 { background: rgba(95,116,136,0.35); color: #cfe0ec; }
.toolbar-lv-btn.l3 { background: rgba(192,138,46,0.35); color: #f6dfae; }
.toolbar-lv-btn.l4 { background: rgba(217,119,87,0.4); color: #ffd9cb; }
.toolbar-lv-btn:hover { transform: scale(1.12); }
.toolbar-lv-btn.picked { outline: 2px solid #fff; transform: scale(1.12); }
.toolbar-lv-btn:disabled { cursor: default; }
.toolbar-lv-btn:disabled:not(.picked) { opacity: 0.4; }

/* ── 能力画像详情 · C×L 库存格子 ── */
.cap-cxl { margin: 10px 0 14px; }
.cap-cxl-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.cap-cxl-head .muted { font-size: 12px; }
.cap-cxl-grid {
  display: grid; grid-template-columns: 118px repeat(var(--cxl-cols, 4), 1fr);
  gap: 4px; align-items: stretch;
}
.cap-cxl-colhead { font-size: 12px; color: var(--text-soft); text-align: center; padding: 2px 0; cursor: help; }
.cap-cxl-rowhead {
  font-size: 12px; color: var(--text-soft); display: flex; align-items: center; gap: 4px;
  padding: 0 6px; white-space: nowrap; overflow: hidden; cursor: help;
}
.cap-cxl-rowname { overflow: hidden; text-overflow: ellipsis; }
.cap-cxl-cell {
  position: relative; border: 1px solid var(--line); border-radius: 8px;
  background: color-mix(in srgb, var(--follow-soft) calc(var(--heat, 0) * 100%), var(--panel));
  font: 600 13.5px/1.2 var(--sans); color: var(--text); padding: 7px 4px 6px;
  cursor: pointer; text-align: center; transition: box-shadow 0.12s;
}
.cap-cxl-cell small { display: block; font-size: 10px; font-weight: 500; color: var(--accent-hover); }
.cap-cxl-cell:hover { box-shadow: var(--shadow); }
.cap-cxl-cell.selected { outline: 2px solid var(--accent); }
.cap-cxl-cell.is-empty { cursor: pointer; background: var(--bg); color: var(--muted); }
.cap-cxl-cell.is-empty:not(.has-reader-tag) { cursor: default; }
.cap-cxl-cell.is-here { border-color: var(--accent); }
.cap-cxl-cell.has-reader-tag { box-shadow: inset 0 0 0 1px var(--star); }
.cap-cxl-rt { color: var(--star) !important; }
.cap-cxl-here { position: absolute; top: 1px; right: 3px; font-size: 11px; font-style: normal; }

/* 点格后的就地卡片列表 */
.cap-cxl-list { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); padding: 6px 8px; max-height: 260px; overflow-y: auto; }
.cap-cxl-list.hidden { display: none; }
.cap-cxl-list-head { display: flex; gap: 8px; align-items: baseline; padding: 2px 0 6px; font-size: 13px; }
.cap-cxl-item { display: flex; gap: 8px; align-items: baseline; padding: 3px 4px; border-radius: 6px;
  font-size: 12.5px; cursor: pointer; min-width: 0; }
.cap-cxl-item:hover { background: var(--accent-tint); }
.cap-cxl-item.is-read { opacity: 0.55; }
.cap-cxl-item-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cap-cxl-item-tail { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; }
.cap-cxl-item-tail b { color: var(--accent-hover); }