/* 角色 map（role-map.js）。视图显隐跟 skill 库一样写在自己的 CSS 里。 */
.rolemap { display: none; grid-column: 2; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); position: relative; }
#app[data-view="rolemap"] .rolemap { display: flex; }
@media (max-width: 880px) {
  .rolemap { position: fixed; left: 0; right: 0; top: var(--vbanner, 0px); bottom: calc(var(--tab-h) + var(--kb)); }
}

.rm-body { display: flex; flex-direction: column; gap: 12px; }
.rm-body .cm-filters { margin-bottom: 0; }
.rm-body .segmented button { padding: 4px 12px; }
.rm-body .cm-filters .select { width: auto; }
.rm-body .cm-toggle { white-space: nowrap; }
.rm-updated { margin-top: -6px; }
.rm-honest { font-size: 12px; color: var(--text-2); background: var(--surface-sunken); border-radius: var(--r-md); padding: 8px 12px; line-height: 1.6; }
.rm-warn { color: #b26a00; background: rgba(255, 149, 0, 0.1); }
.rm-muted { color: var(--text-3); font-size: 12px; line-height: 1.6; }
.rm-note { margin-bottom: 4px; }
.rm-main { min-width: 0; }

.rm-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.rm-chips .chip { font-size: 12px; padding: 1px 9px; white-space: nowrap; cursor: pointer; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* 爱好树 */
.rm-tree { display: grid; gap: 12px; }
.rm-group { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 10px 12px; }
.rm-group-h { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.rm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.rm-tile { border: 1px solid var(--hair); border-radius: var(--r-md); padding: 6px 8px; background: var(--surface-sunken); min-height: 38px; }
.rm-tile.rm-has { background: rgba(0, 122, 255, 0.07); border-color: rgba(0, 122, 255, 0.25); }
.rm-tile.rm-gap { border: 2px solid rgba(255, 149, 0, 0.7); }
.rm-tile-n { font-size: 12.5px; font-weight: 500; }
.rm-tile .rm-chips { margin: 4px 0 2px; }

/* 分组条形表（故事 / 时代 / 地域 / 关系） */
.rm-bars { width: 100%; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.rm-bars td { width: 28%; }
.rm-bars td.rm-rowname { width: 120px; font-weight: 500; white-space: nowrap; }
.rm-bar { height: 6px; border-radius: 3px; background: var(--accent); min-width: 0; }
.rm-bar-demand { background: var(--orange); margin-bottom: 4px; }
.rm-bar-users { background: var(--purple); margin-bottom: 4px; }

/* 角色详情（放在 Studio 统一的 .drawer-body 里） */
.rm-detail { font-size: 13px; line-height: 1.55; display: block !important; }
.rm-detail-h { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.rm-detail h4 { font-size: 13px; margin: 14px 0 4px; color: var(--text); }
.rm-dim { display: grid; grid-template-columns: 36px 1fr 22px; gap: 8px; align-items: center; }
.rm-dim-k { font-weight: 500; }
.rm-dim-v { text-align: right; font-variant-numeric: tabular-nums; }
.rm-track { height: 6px; background: var(--bg-deep); border-radius: 3px; overflow: hidden; }
.rm-fill { height: 100%; background: var(--accent); }
.rm-ev { font-size: 12px; color: var(--text-2); margin: 0 0 4px 44px; }
.rm-ev.rm-none { color: var(--text-3); font-style: italic; }

.rm-sec { font-size: 14px; margin: 14px 0 2px; }

/* 类型：按性别三栏 */
.rm-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 1300px) { .rm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .rm-cols { grid-template-columns: 1fr; } }
.rm-type { border-top: 1px solid var(--hair); padding: 7px 2px; }
.rm-type.rm-gap { background: color-mix(in srgb, var(--orange) 8%, transparent); border-radius: var(--r-sm); }
.rm-type-h { display: flex; gap: 8px; align-items: center; }
.rm-type-h b { font-size: 13px; margin-right: auto; }
.rm-empty-types { border-top: 1px solid var(--hair); padding-top: 8px; }
.rm-demand-btn { border: 0; font: inherit; font-size: 12px; cursor: pointer; }
.rm-demand-btn:hover { filter: brightness(0.95); text-decoration: underline; }

/* 性格：九维热力表 */
.rm-heat { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.rm-hc { text-align: center !important; min-width: 44px; font-variant-numeric: tabular-nums;
         background: color-mix(in srgb, var(--accent) calc(var(--v, 0) * 55%), transparent); }
.rm-hc-want { background: color-mix(in srgb, var(--orange) calc(var(--v, 0) * 60%), transparent); font-size: 12px; white-space: nowrap; }
.rm-want td { border-bottom: 2px solid var(--hair-strong); font-weight: 500; }

/* 投稿原文弹层 */
.rm-sub { border-bottom: 1px solid var(--hair); padding: 10px 0; display: grid; gap: 4px; }
.rm-sub-sum { font-weight: 600; }
.rm-sub-text { white-space: pre-wrap; color: var(--text); background: var(--surface-sunken); border-radius: var(--r-sm); padding: 6px 8px; }

.rm-table { border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.rm-table td, .rm-table th { padding: 6px 10px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.rm-table th { font-size: 12px; color: var(--text-2); font-weight: 500; }

/* 元素库 */
.rm-els td.rm-rowname { width: 140px; min-width: 8em; white-space: normal; }
.rm-els tr.rm-gap td { background: color-mix(in srgb, var(--orange) 8%, transparent); }
.rm-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 500; color: var(--accent); cursor: pointer; text-align: left; }
.rm-link:hover { text-decoration: underline; }
.rm-src { padding: 4px 0; border-bottom: 1px solid var(--hair); word-break: break-all; }
.rm-pick-lists { flex-wrap: wrap; margin-bottom: 8px; }
.rm-body .rm-pick-q { width: 240px; flex: none; }
.rm-tags td { vertical-align: top; font-size: 12.5px; }
.rm-tags td.rm-scored { background: color-mix(in srgb, var(--accent) 8%, transparent); }

/* 全部投稿 */
.rm-subs { display: grid; gap: 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: 0 14px 10px; }
.rm-subs > .btn { justify-self: start; margin-top: 10px; }
.rm-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rm-sub-ai { font-size: 12px; color: var(--accent); }
.rm-sub-imgs { display: flex; gap: 6px; flex-wrap: wrap; }
.rm-sub-imgs img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--hair); }

/* 内部点子 */
.rm-idea { margin: 2px 0; }
.rm-idea summary { cursor: pointer; display: inline-block; }
.rm-idea .cm-filters { margin-top: 6px; }
.rm-idea-text { flex: 1; min-width: 320px; }