:root {
  --role-teal: #1abc9c; --role-green: #2ecc71; --role-purple: #9b59b6; --role-pink: #e91e63; --role-red: #e74c3c;
  --role-orange: #e67e22; --role-yellow: #f1c40f; --role-brown: #a0522d; --role-grey: #95a5a6; --role-slate: #607d8b;
}

:root:not([data-theme="light"]) .tint-d { color: var(--ink-d); }
:root[data-theme="light"] .tint-l { color: var(--ink-l); }
:root:not([data-theme="light"]) .m-name.ok.tint-d, :root[data-theme="light"] .m-name.ok.tint-l { text-decoration: underline 2px var(--accent); text-decoration-skip-ink: none; text-underline-offset: 4px; }

.role-ic { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; align-self: center; border-radius: 4px; overflow: hidden; }
.role-ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.role-ic img:not([src]) { visibility: hidden; }
.role-ic.off { visibility: hidden; }
.role-ic.s20 { width: 20px; height: 20px; }
.role-ic.s24 { width: 24px; height: 24px; border-radius: var(--radius-small); }
.m-h .role-ic { margin-left: calc(-1 * var(--s1)); }
.cs-name .role-ic { align-self: center; }

.rmention { cursor: default; }
.rmention:hover { background: var(--pill-neutral-bg); }

.role-h .role-h-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.comp-quiet { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.comp-quiet:empty { display: none; }
.ta-opt .ta-at { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: var(--round); background: var(--active); color: var(--muted); font-weight: 600; }

.rp-colour { display: grid; gap: var(--s3); margin: 0; padding: 0; border: 0; }
.rp-colour legend { padding: 0; margin-bottom: var(--s2); }
.rp-hexrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s5); }
.rp-hexrow .fld { flex: 0 1 180px; }
.rp-hex { font-family: var(--mono); letter-spacing: 0; }
.rp-shown { display: grid; gap: var(--s1); min-width: 0; }
.rp-shown .lbl { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; }
.rp-shown-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4); min-height: var(--control-height); }
.rp-sample { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; }
.rp-themes { display: inline-flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.rp-theme { display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.rp-theme .role-dot { width: 12px; height: 12px; }
.rp-theme .s { color: var(--faint); font-size: var(--fs-small); line-height: var(--lh-small); }
.rp-err { min-height: var(--lh-small); color: var(--pill-negative-ink); font-size: var(--fs-small); line-height: var(--lh-small); }
.rp-icon { display: grid; gap: var(--s2); }
.rp-icon-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); min-height: var(--control-height); }
.rp-icon-slot { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-small); background: var(--raised); color: var(--faint); font-size: var(--fs-small); }
.rp-icon-slot .role-ic.s24 { width: 32px; height: 32px; }
.rp-icon-said { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.rp-display { margin: 0; padding: 0; border: 0; }
.rp-display legend { padding: 0; margin-bottom: var(--s1); color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: 500; }
.rp-display .perm-row:last-child { border-bottom: 1px solid var(--rule); }
.role-row .role-ic { margin-left: var(--s1); }
.rp-look { display: grid; gap: var(--s5); }