/* Custom roles: the "name the role" row under a role list (v11-roles.js). */
.v11-role-new{display:flex;gap:6px;align-items:center;margin-top:6px;width:100%;animation:v11-role-in .5s cubic-bezier(.16,.84,.3,1) backwards}
.v11-role-new input{flex:1;min-width:0;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface,#fff);color:var(--text);font:inherit;font-size:12px}
.v11-role-new input:focus{outline:2px solid color-mix(in srgb,var(--nhs,#1E86C8) 45%,transparent);outline-offset:1px}
.v11-role-new .btn{padding:6px 10px;font-size:11px;white-space:nowrap}
@keyframes v11-role-in{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.v11-role-new{animation:none}}