/* Relações (views/relations.js): cartões por pessoa com barra de vínculo e botões de ação grandes para o dedo. */
.rl-page { display: flex; flex-direction: column; gap: 12px; }
.rl-left { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rl-left b { font-family: var(--font-pixel); font-size: 16px; color: var(--green, #2bb673); }
.rl-left.none b { color: var(--muted); }
.rl-list, .rl-prospects { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rl-card { display: flex; flex-direction: column; gap: 10px; }
.rl-head { display: flex; align-items: center; gap: 10px; }
.rl-ico { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.rl-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rl-who b { line-height: 1.25; }
.rl-role { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.rl-num, .rl-chance { font-family: var(--font-pixel); font-size: 15px; }
.rl-chance { color: var(--accent); }
.rl-bond { height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.rl-bond span { display: block; height: 100%; background: #2bb673; }
.rl-bond.mid span { background: #e0a526; }
.rl-bond.bad span { background: #e05a4a; }
.rl-warn { margin: 0; color: #c8492f; }
.rl-note { margin: 0; }
.rl-acts, .rl-search { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.rl-act { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 8px 10px; text-align: left; white-space: normal;
  font-family: var(--font); font-size: 14px; text-transform: none; letter-spacing: normal; }
.rl-act small { font-size: 11px; opacity: .75; font-weight: 400; }
.rl-search .rl-act { min-height: 70px; }
.rl-pref { padding: 6px 8px; }
.rl-banner { display: flex; align-items: center; gap: 8px; font-weight: 600; }
@media (max-width: 560px) { .rl-list, .rl-prospects { grid-template-columns: 1fr; } }