/* Roles (roles.js): the five roles in a person's «⋯» sheet, «لینک‌ها» and «تغییر نقش‌ها» under «بیشتر». */
.mod-role { display: flex; justify-content: space-between; gap: 12px; }
.mod-role b { color: var(--accent-ink); font-weight: var(--fw-b, 700); }

.role-opts { display: flex; flex-direction: column; gap: 4px; max-height: 60dvh; overflow-y: auto; }
.role-opt {
  appearance: none; display: flex; align-items: flex-start; gap: 10px;
  width: 100%; min-height: 56px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink); text-align: start; cursor: pointer;
  transition: background-color var(--t-fast, 120ms) ease, border-color var(--t-fast, 120ms) ease;
}
.role-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.role-opt:disabled { opacity: .6; cursor: progress; }
@media (hover: hover) { .role-opt:hover { background: var(--hover); } .role-opt[aria-pressed="true"]:hover { background: var(--accent-soft); } }
.role-tick { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--accent-ink); }
.role-tick .ic { width: 20px; height: 20px; }
.role-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.role-txt b { font-weight: var(--fw-b, 700); }
.role-txt small { color: var(--muted); font-size: var(--fs-meta, 13px); line-height: 1.6; }

.role-links, .role-log { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.role-link { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.role-linkhead { display: flex; align-items: center; gap: 10px; }
.role-linkhead .btn { flex: none; }
.role-said { display: block; color: var(--muted); margin-top: 4px; }
.role-said:empty { display: none; }
.role-linkbox { margin-top: 6px; font-size: 12px; word-break: break-all; user-select: all; }

.role-log li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.role-log li:last-child { border-bottom: 0; }
.role-log time { color: var(--muted); font-size: var(--fs-meta, 13px); font-variant-numeric: tabular-nums; }
.role-log span { flex: 1 1 200px; min-width: 0; }
.role-log small { color: var(--muted); flex-basis: 100%; }